Vue3使用总结
Vue3 知识总结
ref、reactive、toRef、toRefs的区别
| 名称 | 作用 | 区别 |
|---|---|---|
| ref | 用于为对象添加响应式状态，基本数据类型作为参数，返回一个具有响应式状态的副本。 | 1、获取数据值的时候需要加.value。2、可以理解为ref是通过reactive包装了一层具有value属性的对象实现的。3、参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广。 |
| reactive | 用于为对象添加响应式状态，接收对象作为参数，返回一个具有响应式状态的副本。 | 1、获取数据值的时候直接获取，不需要加.value。 2、参数只能传入对象类型 |
| toRef | toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性名，返回一个ref数据 | 1、获取数据值的时候需要加.value。2、toRef后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据 |
| toRefs | toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题。 | 1、获取数据值的时候需要加.value。 2、toRefs后的ref数据不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据。3、作用其实和 toRef 类似，只不过 toRef 是一个个手动赋值，而 toRefs 是自动赋值。 |
| 尽量不要混着用，reactive和ref选一种，toRef和toRefs选一种，不然代码会很乱. |
