千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

toRef/toRefs

相同:将数据转换为响应式数据对象,使用时需要加.value。

不同:toRef 只能将单个属性转化为 ref ,如果对象中属性多的话,一个个转太麻烦了,于是就会使用 toRefs ,将对象中的全部属性转化为 ref。

toRef 函数有两个参数,参数1为操作对象,参数2为对象中的属性。

toRefs 函数有一个参数,其为整个对象。

如果原对象中没有结构的属性,toRef 会将其赋值为响应式对象,对象.value是undefined,而 toRefs 会将其赋值为 undefined,而不是响应式对象。

总结:

1. 如果想让响应式数据和以前的数据关联起来，并且想在更新响应式数据的时候不更新视图，那么就使用 toRef 函数。
2. 如果希望将对象的多个属性都变成响应式数据，并且要求响应式数据和原始数据关联，更新响应式数据的时候不更新视图，就使用 toRefs 函数用于批量设置多个数据为响应式数据。因为 toRef 函数一次仅能设置一个数据。
3. toRefs 函数接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用 toRef 函数执行。