标签：响应 对象 toRefs 视图 toRef reactive vue3 ref

了解ref()、reactive()这两个特性之前，我们先回顾一下vue2中data和method方法。在vue2中我们定义一个响应式变量name，通过点击事件handle来改变name的值是通过如下方式写的。这样只要name改变则界面相应的会发生改变，这就是数据的双向绑定。

那么在vue3.0中，我们怎么定义响应式变量呢？我们下面对ref()、reactive()、toRefs()这三个方法进行讲解。

1、ref() 函数

我们先理解一下最简单的ref。
ref就是把string、Number、Boolean、Symbol类型的数据添加响应式
接受一个原始值，返回一个具有响应式的对象，具有value属性。他的值就是传递的原始值。
修改的话直接修改 xx.value
源数据的值不会被更改，并且数据变化会立马改变HTML

 

 

2、reactive() 函数

理解完ref,再来理解一下和ref相对应的reactive
reactive也很好理解，就是传入对象，把传入的对象变成响应式的对象。增删改查和深度的增删改查都会触发响应式从而改变视图。
但是响应式的对象值改变了，原有的数据也会被改变。HTML视图也会实时更改

顺便说一下ref,也可以接收对象。源码会自动判断传入的值，如果是对象会自动变成reactive包裹。

toRef

toRef是用来给抽离响应式对象（被reactive包裹的对象）中的某一个属性的，并且把这个属性包裹成ref对象，使其和原对象产生链接。
或许有人就回有人有疑问了？这个toRef存在有什么意义呢？因为我们知道reactive包裹的东西其实已经有了响应式了，再用toRef什么意义呢？

 

 

如图：我们如果要单独把对象中的某个值拿出来，如果直接赋值，会断掉响应式（people3）。就算后面people.name的名字改了，但是因为断掉了响应式，输出的还是原有的名字。
而使用toRef会保持对其源 property 的响应式连接。
并且响应是互相的，数据源数据也会被更改
数据会实时更新到HTML视图上（这里会更新到html视图主要还是因为是reactive包裹了，为什么这么说，我最后有提到）

 

 

有人又会问了，那如果说toRef只是把这个响应式对象的属性包裹成ref对象，那我直接用ref这个对象不就可以了吗？何必要用toRef呢。
答：ref是不会去更改原数据的，ref本质是拷贝原数据，而toRef会修改原数据！！

 

 实际使用就看自己的了~

toRefs

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref*。

这句官方定义我都读了很久没太懂啥玩意儿啊？别怕，我给你解释一下
批量版的toRef
toRef不是只能对象中的一个属性嘛，这个可以直接给你整个对象的属性都一起给整成ref。

 

 和toRef的区别，在使用的时候注意要加上xxx.属性名.value

 

 总结：toRefs和toRef没啥区别，就是批量和单个的区别。也是相互响应

关于ref、reactive和toRef、toRefs的区别

ref、reactive数据更新后立马会更新HTML视图。
toRef、toRefs更新会后会等下次更新视图的时候更新视图

标签：响应,对象,toRefs,视图,toRef,reactive,vue3,ref
From： https://www.cnblogs.com/bisiyuan/p/17168944.html