vue3——toRef

一.ref与toRef的区别：

ref:复制，修改响应式数据不会影响原始数据

toRef引用，修改响应式数据会影响原始数据

ref:数据发生改变，界面会自动更新

toRef:数据发生改变，界面也不会自动更新

toRef应用场景：

如果想让响应式数据和以前的数据关联起来，并且更新响应数据之后不想更界面，就用toRef

二.toRef的使用

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

语法：const name = toRef(person,'name')

应用: 要将响应式对象中的某个属性单独提供给外部使用时。

扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

代码演示：

原始代码：

上诉代码中可以看到使用的数据都是person.xxx,person在代码中不整洁

如果我们想实现效果还不繁琐，就需要用到toRef方法

使用toRef

首先引入toRef方法然后在返回的使用调用toRef并传入要返回的对象里面的哪个值，就可以实现响应式

就可以实现响应式数据

使用toRefs

   引入toRefs方法 我们还可以使用toRefs来包装多个ref数据  解构之后返回 模板中也可以使用