各位观众老爷们，晚上好！今天咱们来聊聊 Vue 3 响应式系统里的两个小可爱——toRef 和 toRefs。别看它们名字有点像，但作用可是大大的不同，尤其是在处理 reactive 对象解构的时候，能不能保住你的响应性小命，就全靠它们了！
一、响应式世界观：reactive 的爱与痛
首先，咱们得回顾一下 Vue 3 的响应式基础。reactive 函数能把一个普通 JavaScript 对象变成响应式对象。这意味着，当你修改这个对象的属性时，所有用到这个属性的视图都会自动更新。这感觉就像给你的数据穿上了魔法盔甲，一有风吹草动，整个世界都知道。
import { reactive } from 'vue';
const state = reactive({
name: '张三',
age: 30,
});
console.log(state.name); // "张三"
// 修改 state.name 会触发视图更新
state.name = '李四';但是，reactive 也有个小小的“洁癖”。它只对它“直接拥有”的属性负责。如果咱们把响应式对象里的属性解构出来，单独使用，麻烦就来了！
import { reactive } from 'vue';
const state = reactive({
name: '张三',
age: 30,
});
const { name, age } = state; // 解构
console.log(name); // "张三"
state.name = '王五';
console.log(name); // 仍然是 "张三"，视图不会更新！看到了吧？解构出来的 name 和 age 变成了普通的变量，跟原来的 state 对象断绝了关系。state.name 就算改成了“王五”，name 还是那个“张三”，视图也不会跟着变！这可不行，咱们要的是“一荣俱荣，一损俱损”的响应式体验啊！
二、救星降临：toRef 的妙用
这个时候，toRef 就闪亮登场了！它的作用是：把响应式对象的一个属性变成一个 ref 对象。 也就是说，它能让这个属性继续保持响应性，但又可以像 ref 一样被单独使用。
import { reactive, toRef } from 'vue';
const state = reactive({
name: '张三',
age: 30,
});
const nameRef = toRef(state, 'name');
console.log(nameRef.value); // "张三"
state.name = '赵六';
console.log(nameRef.value); // "赵六"，视图会更新！看，用了 toRef 之后，nameRef.value 就跟 state.name 建立了紧密的联系。无论 state.name 怎么变，nameRef.value 都会跟着变，视图也会自动更新！这才是咱们想要的响应式体验！
toRef 源码解析：
让我们深入 Vue 3 源码，看看 toRef 到底是怎么实现的：
function toRef(
target: object,
key: string,
defaultValue?: any
): Ref<any> {
if (isRef(target[key])) {
return target[key]
}
return {
__v_isRef: true,
get value() {
const value = target[key]
return value === undefined ? defaultValue : value
},
set value(newValue) {
target[key] = newValue
}
} as Ref
}这段代码看起来不长，但信息量很大。咱们来一步步分析：
isRef(target[key])： 首先，它会检查target[key]是不是已经是ref对象了。如果是，那就直接返回，避免重复包装。__v_isRef: true： 如果不是ref对象，它会创建一个新的对象，并设置__v_isRef属性为true。这个属性是 Vue 3 用来判断一个对象是不是ref对象的标志。get value()：get value()方法返回target[key]的值。这里用到了target[key]，所以它能访问到reactive对象里的属性，并获取最新的值。如果target[key]是undefined，则返回defaultValue。set value(newValue)：set value(newValue)方法把新的值赋给target[key]。这个操作会触发reactive对象的更新机制，从而更新视图。
总的来说，toRef 就像一个“代理”，它把对 ref 对象的 value 属性的访问和修改，都转发给了 reactive 对象的对应属性。这样，咱们就能在保持响应性的前提下，单独使用 reactive 对象的属性了。
三、批量操作：toRefs 的威力
如果咱们想把 reactive 对象的所有属性都变成 ref 对象，一个个手动调用 toRef 就太麻烦了。这时候，toRefs 就派上用场了！它可以一次性把 reactive 对象的所有属性都转换成 ref 对象，并返回一个包含所有 ref 对象的新对象。
import { reactive, toRefs } from 'vue';
const state = reactive({
name: '张三',
age: 30,
});
const stateRefs = toRefs(state);
console.log(stateRefs.name.value); // "张三"
console.log(stateRefs.age.value); // 30
state.name = '李四';
console.log(stateRefs.name.value); // "李四"，视图会更新！用了 toRefs 之后，咱们就可以像访问普通对象一样，访问 stateRefs 的属性，但实际上，这些属性都是 ref 对象，它们的值会随着 state 对象的改变而自动更新。
toRefs 源码解析：
toRefs 的实现也很简单：
export function toRefs<T extends object>(
object: T
): { [K in keyof T]: ToRef<T[K]> } {
if (__DEV__ && !isProxy(object)) {
console.warn(`toRefs() expects a reactive object but received a plain one.`)
}
const ret: any = isArray(object) ? new Array(object.length) : {}
for (const key in object) {
ret[key] = toRef(object, key)
}
return ret
}isProxy(object): 首先，它会检查传入的对象是否是reactive对象。如果不是，就会发出警告。isArray(object): 然后，它会判断传入的对象是不是数组。如果是数组，就创建一个新的数组；如果是普通对象，就创建一个新的对象。toRef(object, key): 最后，它会遍历传入对象的所有属性，并对每个属性调用toRef函数，把属性变成ref对象，并把ref对象赋值给新对象的对应属性。
总的来说，toRefs 就像一个“批量转换器”，它把 reactive 对象的每个属性都转换成 ref 对象，并把这些 ref 对象组合成一个新的对象。这样，咱们就可以方便地把 reactive 对象的属性解构出来，并在保持响应性的前提下单独使用了。
四、最佳实践：toRef 和 toRefs 的应用场景
那么，在实际开发中，toRef 和 toRefs 应该怎么用呢？
-
在
setup函数中返回响应式对象的属性： 这是toRefs最常见的应用场景。在setup函数中，咱们通常需要返回一些响应式数据给模板使用。如果直接返回reactive对象，模板中就必须通过state.name这样的方式来访问属性。如果使用toRefs，就可以直接返回一个包含所有ref对象的新对象，让模板可以直接通过name这样的方式来访问属性，代码更简洁。import { reactive, toRefs } from 'vue'; export default { setup() { const state = reactive({ name: '张三', age: 30, }); return toRefs(state); }, template: ` <div> <p>姓名：{{ name }}</p> <p>年龄：{{ age }}</p> </div> `, }; -
在组件之间传递响应式对象的属性： 有时候，咱们需要在不同的组件之间共享响应式数据。如果直接传递
reactive对象，子组件可能会不小心修改父组件的状态。使用toRef或toRefs可以避免这个问题，因为子组件只能通过ref对象的value属性来访问和修改数据，而父组件可以控制ref对象的更新。 -
在计算属性中使用响应式对象的属性： 计算属性可以根据响应式数据自动计算出新的值。如果计算属性依赖于
reactive对象的属性，最好使用toRef或toRefs来确保计算属性的响应性。import { reactive, toRef, computed } from 'vue'; export default { setup() { const state = reactive({ firstName: '张', lastName: '三', }); const fullName = computed(() => { return toRef(state, 'firstName').value + toRef(state, 'lastName').value; }); return { fullName, }; }, template: ` <div> <p>姓名：{{ fullName }}</p> </div> `, };
五、toRef vs toRefs：选择困难症终结者
说了这么多，相信大家对 toRef 和 toRefs 已经有了比较深入的了解。但还有一个问题：什么时候该用 toRef，什么时候该用 toRefs 呢？
其实很简单：
- 如果只需要转换
reactive对象的一个属性，就用toRef。 - 如果需要转换
reactive对象的多个属性，甚至所有属性，就用toRefs。
用表格来总结一下：
| 函数 | 作用 | 适用场景 |
|---|---|---|
toRef |
把 reactive 对象的一个属性变成 ref 对象 |
只需要转换一个属性，例如：在计算属性中使用 reactive 对象的属性，或者在组件之间传递单个响应式属性。 |
toRefs |
把 reactive 对象的多个属性变成 ref 对象 |
需要转换多个属性，例如：在 setup 函数中返回响应式对象的属性，或者在组件之间传递多个响应式属性。 |
六、注意事项：别踩坑！
在使用 toRef 和 toRefs 的时候，还有一些需要注意的地方：
-
toRef和toRefs只能用于reactive对象。 如果你把它们用在普通 JavaScript 对象上，它们不会报错，但也不会有任何效果。 -
toRefs会创建新的对象。 它不会修改原来的reactive对象，而是返回一个包含所有ref对象的新对象。所以，如果你想修改reactive对象，还是要直接修改原来的对象，而不是修改toRefs返回的对象。 -
toRef返回的ref对象是只读的。 你只能通过ref.value来访问和修改属性的值。如果你直接修改ref对象，例如ref = newValue，这不会触发响应式更新。
七、总结：响应式护航，一路畅通！
好了，今天的讲座就到这里了。希望通过今天的讲解，大家对 Vue 3 的 toRef 和 toRefs 函数有了更深入的了解。它们是响应式系统里的小小英雄，能帮助咱们在解构 reactive 对象时保持响应性，让咱们的 Vue 应用更加健壮和高效。记住，合理运用 toRef 和 toRefs，就能让你的响应式开发之路一路畅通！感谢各位的观看，咱们下期再见！