vue3-ref与reactive创建响应式对比

 1.先了解什么是响应式

往往认为只要数据发生变化 页面发生变化就是响应式 。其实并不然 这句话说的不太准确 当一个数据所依赖的函数发生变化 会重新渲染并更新页面。其实这句话已经很明确 往往数据是根据所依赖的函数发生变化 才叫做响应式。

Vue3响应式

可以看出控制台已经发生了改变 但页面并没有变化 因为并没有进行响应 此时要提起两个API ref 和 reactive 

先来看ref创建响应式

在函数中price+=10 报错了 先来看输出控制台brand price

此时我们看到出现refImpL  是一个实例对象

展开来可以看到数据都在这 当然真正的数据在value身上

给price.value就已经是响应式了 可以得出一个结论 只要是ref创建的都要.value 

reactive创建响应式

可以看到全面报错 根据上述将ref创建响应式 是和reactive是有区别 ref创建的是基本数据类型的响应式 而reactive创建的是对象式响应式

现在已经不报错了 先来看控制台输出car

其实这个proxy实现数据代理 ES6 原生提供 Proxy 构造函数 用来生成 Proxy 实例 相对于vue2来说 Object.defineProperty()实现数据代理 ES6原生提供 用来定义一个对象 之前写的内容讲过 可以来之前vue2数据代理 

此时可以看到数据都在这里 来看点击修改汽车是不是响应式

已经发生了响应式 可以得出一个结论 只要是reactive 可以用来创建对象式响应式

区别:

1.ref 创建的变量必须使用.value

2.reactive 重新分配一个新对象 会失去响应式 

第二点 看代码

数据源里面是reative定义的一个响应式数据 当在函数中又写了reactive去定义一个响应式数据 把之前的响应式对象直接断了 开了一个新的响应式对象 由此失去了响应式 在ES6中一个API Object.assign()方法 作用一个对象分配另一个对象

可以看到 页面已经发生变化 

有一个小点 ref也可以用来定义对象式响应式 看代码

 

同理发生了变化 相比reactive比较麻烦 而ref直接.value就可以直接修改 在这里我加一个sum求和例子

 

如果改成这样 可行吗

 

可以看出并不行 因为并没有.value 直接越过了.value直接修改了值

得出结论:

1.若需要一个基本类型的响应式数据 必须使用 ref 必须.value

2.若需要响应式对象 层次不身 ref reactive 都可以

3.若需要一个响应式对象 且层次较深 推荐使用 reactive

官方解释:如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。