ref、reactive、toRef、toRefs使用与区别

2024-10-20 04:38:32

reactive
- 传参：reactive(arg)，arg只能是对象
  - arg为普通对象
- 返回响应式对象，不管层级多深，都能响应
- 使用：获取数据值的时候直接获取，不需要加.value
- 特点：解构、扩展运算符会失去响应式（$1）
ref
- 传参：ref(arg)
  - arg为任意类型，推荐基本类型使用
- 参数可以传递任意数据类型，传递对象类型时也能保持深度响应式，所以适用性更广
- 使用：获取数据值的时候需要加.value。
- vue 3.0 setup里定义数据时推荐优先使用ref，方便逻辑拆分和业务解耦。

　　　　　　

toRef
- 针对reactive中$1的问题，创建了toRef。toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。
- 传参：toRef(arg1, arg2)
- - 参数1：arg1 - reactive响应式对象
  - 参数2：arg2 - 该响应对象中的某个属性。
- 返回：一个ref数据可以针对reactive创建的响应式对象中的某个属性创建一个ref，且两个之间保持引用关系。
  
  也就是说用一个对象的某个属性，可以通过两个方式来改变，结果是一致的，都反应到了该响应式对象上来。

　　　　　使用：1、获取数据值的时候需要加.value。2、场景：使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。

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

toRefs
从名字上可以看出跟toRef是相似的，其实确实也是相似的
区别
- toRef是将reactive中的某个属性转为ref
- toRefs是一次性将reactive中的所有属性都转为ref
传参：toRefs(arg1)
- 只接受一个参数，为reactive响应式对象
对于reactive中存在的$1问题，toRefs返回的响应式对象可以进行解构、扩展运算符等操作，而不会失去响应式。
使用：获取数据值的时候需要加.value
特点：toRefs后的ref数据如果是复杂类型数据时，不是原始数据的拷贝，而是引用，改变结果数据的值也会同时改变原始数据

五、结语

尽量不要混着用，reactive 和 ref 选一种，toRef 和 toRefs 选一种，不然代码会很乱。

推荐 ref 和 toRefs 一把梭。

最新文章

热门文章