vue3 toRefs 与 toRef的使用

toRefs :

作用：将一个 reactive 创建的响应式对象的每一个属性，转换为ref对象。

使用场景

解构响应式对象

当对响应式对象进行解构操作时，解构出来的属性会失去响应性。这时使用 toRefs 就能保证解构后的属性仍然保持响应性

  let person = reactive({name:'张三',age:18})// 使用toRefs从person这个响应式对象中，解构出name、age，且name和age依然是响应式的let {name,age} = toRefs(person)

经过 toRefs 处理后，name 和 age 都变成了 ref 对象。访问 name.value 与直接问 person.name 所获取的值是相同的，并且对 name.value 进行修改会同步反映到 person.name 上，反之亦然，它们都能保持响应式更新

 toRef

作用：与toRefs一致

当你仅需对响应式对象中的某一个属性创建引用时，可以使用 toRef。

 let person = reactive({name:'张三',age:18})let nl = toRef(person,'age')// 通过toRef将person对象中的age属性取出，且依然保持响应式的能力console.log(nl.value)//18