开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情
在 Vue 中，ref 用于注册元素或子组件的引用
对于 ref 和 $refs 的常规操作，想必大家都有所了解，在 Vue2 中，或者说 在 非 setup 钩子中, 绑定了 ref 属性的组件可以通过 this.$refs 来获取指定元素（组件实例）。
比如，在如下是 form 表单中绑定了 ref 属性，this.$refs 会保存已注册过 ref 的所有子组件。我们在组件挂载后对它进行访问。
<form ref="ruleForm"></form>
console.log(this.$refs)
打开控制台可以看到输出结果：
注：
- ref 如果是绑定在普通的元素上，this.$refs.元素名称 可以获取到 DOM 元素
- $refs 是非响应式的
- 在组件挂载后才可以进行访问
Vue3 中获取
在· Vue3 中，无论是使用 setup 语法糖，还是使用 setup() 钩子函数，都是没有 this 的。
组合式 API 的实现方式：
<div ref="myRef">hello</div>
import { ref } from 'vue'
const a = ref()
ref 的参数类型是 string | Function，所以除上述使用方法之外，ref 还可以绑定函数，以及在 v-for 循环中获取多个组件实例：
ref 可以绑定函数
当 ref 绑定的是函数，需要注意是带有冒号的 :ref。函数接口一个默认参数，通过获取到的 el 实例来使用里面的属性或者方法。
代码如下：
<a-form :ref="getTitleRefs"></a-form>
getTitleRefs(el: any) {
console.log(el);
}
运行结果：
获取多个 ref
当有多个组件动态渲染时，可以通过绑定函数来获取全部实例，并存储在一个数组中，方便后续的操作。
其中增加了一步判断 el 是否存在的步骤，目的是为了添加全部实例，并且不重复添加，当节点个数放生变化，得到的整个数组也可以获取到全部的数据。
<form v-for="(item, index) in formList" :ref="(el: any) => { setRef(el, index)}">
</form>
const setRef = (el: any, index: number) => {
if (el) {
refList['ref' + index] = el
}
}
运行结果如下，通过 key 值即可找到对应的数据
