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

• 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 一把梭。