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

Question

如题所述

Answer 1

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

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

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

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

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