Vue中的$refs 用法
Vue中的$refs原理涉及到Vue实例的生命周期、虚拟DOM以及一些底层的JavaScript原理。
- Vue实例的生命周期： 当Vue实例被创建时，它会经历一系列的生命周期钩子，包括
beforeCreate、created、beforeMount、mounted等。在mounted生命周期钩子中，Vue实例的模板已经渲染到真实的DOM上，此时$refs会被填充。 - 模板编译： Vue的模板编译过程将模板转换为渲染函数，这个渲染函数生成虚拟DOM。在编译过程中，识别到有
ref属性的元素或组件，Vue会在实例的$refs对象上创建相应的引用。 - 虚拟DOM与真实DOM关联： Vue使用虚拟DOM来高效地更新实际的DOM。当模板渲染到真实DOM上后，Vue会建立虚拟DOM与真实DOM的关联关系。这时，
ref属性的元素或组件的引用被保存在Vue实例的$refs对象上。 - $refs的填充： 在
mounted生命周期钩子中，Vue实例的$refs对象已经被填充，可以通过this.$refs访问这些引用。
举个例子，如果有以下模板代码：
<template>
<div>
<my-component ref="md"></my-component>
<button ref="myButton">Click me</button>
</div>
</template>在mounted钩子执行后，this.$refs将包含两个引用：md和myButton，分别指向<my-component>组件实例和<button>元素。
总的来说，$refs的原理涉及Vue实例生命周期、模板编译、虚拟DOM和真实DOM的关联过程。这使得我们能够在Vue组件中方便地访问子组件或DOM元素的引用。
举个例子
在Vue中，$refs是一个特殊的对象，用于访问在模板中使用ref属性声明的子组件或DOM元素。而你提到的$refs.md中的.md可能是指某个具体的子组件或者DOM元素的引用。
proxy.$refs.md.$img2Url(pos, res.data): 使用 Vue 中的$refs来获取名为md的子组件，并调用其$img2Url方法，传递位置 (pos) 和上传成功的数据 (res.data)。
proxy.$modal.msgSuccess("上传成功"): 使用 Vue 实例中的$modal对象，调用msgSuccess方法，显示上传成功的提示消息。
假设你在模板中有这样的代码：
<template>
<div>
<my-component ref="md"></my-component>
</div>
</template>在这个例子中，$refs.md将会是对<my-component>组件实例的引用。你可以通过这个引用来访问和操作<my-component>组件的属性和方法。
如果你的代码中有其他使用ref属性的元素或组件，那么$refs对象将包含对这些元素或组件的引用，每个引用的键名就是ref属性的值。
欢迎关注公-众-号【TaonyDaily】、留言、评论，一起学习。
Don’t reinvent the wheel, library code is there to help.
若有帮助到您，欢迎点赞、转发、支持，您的支持是对我坚持最好的肯定(_)
你要保守你心，胜过保守一切。
作者：刘俊涛的博客