千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

Ref家族:

一.属性

在Vue中一般很少用到直接操作DOM，但不可避免会需要用到，这时可以通过ref和$refs来实现。

1.ref当作属性时，用来给元素或者子组件注册引用信息（代替id），使用ref属性标识页面元素或子组件之后，被标识的元素或者子组件会被所在的组件实例对象收集，挂在在所在组件实例对象的$ref属性上。

2.$refs是所有注册过ref的集合（对象），可以用$refs访问组件中的属性以及方法。

注意：$refs不是响应式的，只有在组件渲染完成之后才能填充，想要获取DOM数据更新之后的数据需要使用：this.$nextTick()。

二.方法

1.ref可以用来创建响应式数据，在 setup 中声明的变量是普通变量，没有响应式能力，Vue提供了两个方法：ref和reactive。

两者区别：

ref：可以将数据（基本数据类型和引用数据类型都可以使用）转换为响应式数据（引用数据类型不推荐使用），使用的时候需要添加.value。

reactive：可以将引用数据类型转换为响应式数据。

2.toRefs：帮助我们解构一个响应式对象，并且得到的还是一个响应式数据。

3.toRef:如果解构的时候，属性不确定是否拥有，可以使用这个方法