vue3的ref和reactive以及toRef和toRefs的区别。

Posted 2023-04-22

参考技术A 针对一个响应式对象（reactive 封装）的 prop（属性）创建一个ref，且保持响应式
两者 保持引用关系

例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

toRef后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法
将响应式对象（reactive封装）转成普通对象
对象的每个属性(Prop)都是对应的ref
两者保持引用关系
用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。

toRefs后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据
作用其实和 toRef 类似，只不过 toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值。

Vue3的ref、reactive、toRef、toRefs

参考技术A 在网上看了很多文章没有一个能把这些效果讲清楚的。我写一下自己试出来的结果。

先说一下我根据结论得出的理解：

运行后，html显示： a:1 b:1 。

点击按钮后，输出：

html显示： a:1 b:1 。

运行后，html显示： a:1 b:1 。

点击按钮后，输出：

html显示： a:1 b:2 。

运行后，html显示： a:"a":1,"b":2 b:"a":1,"b":2 。

点击按钮后，输出：

html显示： a:"a":1,"b":2 b:"a":1,"b":2 。

运行后，html显示： a:"a":1,"b":2 b:"a":1,"b":2 。

点击按钮后，输出：

html显示： a:"a":1,"b":4 b:"a":1,"b":4 。

运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

点击按钮后，输出：

html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

点击按钮后，输出：

html显示： a:"a":1,"b":2,"c":4 b:"a":1,"b":2,"c":4 c:4 。

运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

点击按钮后，输出：

html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

点击按钮后，输出：

html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

点击按钮后，输出：

html显示： a:"a":1,"b":2,"c":4 b:"a":1,"b":2,"c":4 c:4 。

运行后，html显示： a:"a":1,"b":2,"c":3 b:"a":1,"b":2,"c":3 c:3 。

点击按钮后，输出：

html显示： a:"a":1,"b":2,"c":4 b:"a":1,"b":2,"c":4 c:4 。

综上，可以总结以下表格：