vue3的ref、reactive、toRefs特性详解

了解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更新会后会等下次更新视图的时候更新视图

posted @ 2023-03-01 17:04  seven&night  阅读(550)  评论(0编辑  收藏  举报