大家好！今天咱们就来聊聊 Vue 3 Composition API 里一对“宝藏”兄弟：toRef 和 toRefs。它们专门用来拯救那些在响应式解构中迷失的变量们，防止你的数据“叛变”，不再响应式更新。
开场白：响应式解构，甜蜜的负担
在 Vue 3 的 Composition API 中，我们经常会遇到需要解构响应式对象的情况。解构很方便，但也很容易掉坑里，一不小心就把响应式给丢了。
举个例子，假设我们有一个响应式对象：
import { reactive } from 'vue';
const state = reactive({
name: '张三',
age: 30,
address: {
city: '北京',
street: '长安街'
}
});如果直接解构：
const { name, age } = state;
console.log(name); // 输出: 张三
state.name = '李四';
console.log(name); // 还是输出: 张三！ 响应性丢失了！看到了吗？name 和 age 变成了普通的变量，和 state 失去了联系。state.name 的改变不会影响到 name 的值。这就是响应式解构的陷阱。
第一章：toRef：单刀赴会，指哪打哪
toRef 的作用很简单，就是为响应式对象的一个属性创建一个 ref。这个 ref 会保持和原始属性的连接，任何对 ref.value 的修改都会同步到原始属性，反之亦然。
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); // 输出: 李四！ 响应式还在！
nameRef.value = '王五';
console.log(state.name); // 输出: 王五！ 双向绑定！toRef 就像一个指向原始属性的指针，通过它，我们就可以安全地访问和修改响应式对象的属性，而不用担心丢失响应性。
toRef 的使用场景：
- 单个属性的响应式解构： 当你只需要解构响应式对象中的一个或几个属性，并且需要保持响应性时，
toRef是最佳选择。 - 传递响应式属性给子组件： 你可以将
toRef创建的ref传递给子组件，子组件可以通过修改ref.value来更新父组件的状态。 - 在模板中使用响应式属性： 虽然在模板中可以直接访问响应式对象的属性，但在某些特殊情况下，使用
toRef可以更清晰地表达你的意图，并且可以避免一些潜在的问题。
第二章：toRefs：兵团作战，雨露均沾
如果我们需要解构响应式对象中的多个属性，并且都想保持响应性，一个个使用 toRef 就太麻烦了。这时候，toRefs 就派上用场了。
toRefs 会将响应式对象的所有属性都转换为 ref，并返回一个包含这些 ref 的对象。
import { reactive, toRefs } from 'vue';
const state = reactive({
name: '张三',
age: 30,
address: {
city: '北京',
street: '长安街'
}
});
const stateRefs = toRefs(state);
console.log(stateRefs.name.value); // 输出: 张三
console.log(stateRefs.age.value); // 输出: 30
console.log(stateRefs.address.value); // 输出: { city: '北京', street: '长安街' }
state.name = '李四';
console.log(stateRefs.name.value); // 输出: 李四！ 响应式还在！
stateRefs.age.value = 35;
console.log(state.age); // 输出: 35！ 双向绑定！
state.address.city = '上海';
console.log(stateRefs.address.value.city); // 输出: 上海! 深度响应式！现在，stateRefs.name 和 stateRefs.age 都是 ref，它们和 state.name 和 state.age 保持着双向绑定。即使是深层嵌套的属性，也能保持响应式。
toRefs 的使用场景：
- 批量解构响应式对象： 当你需要解构响应式对象中的多个属性，并且都希望保持响应性时，
toRefs是最方便的选择。 - 将响应式对象传递给函数： 你可以将
toRefs返回的对象传递给函数，函数可以通过修改ref.value来更新原始状态。 - 在组件中使用响应式对象：
toRefs可以让你更方便地在组件中使用响应式对象，而不用担心响应性丢失。
第三章：toRef vs toRefs：选择困难症终结者
既然 toRef 和 toRefs 都能解决响应式解构的问题，那我们该如何选择呢？
| 特性 | toRef |
toRefs |
|---|---|---|
| 作用 | 为单个属性创建 ref |
为所有属性创建 ref |
| 使用场景 | 解构单个或少量属性时 | 解构多个属性时 |
| 返回值 | 一个 ref 对象 |
一个包含多个 ref 的对象 |
| 适用性 | 对特定属性进行精细控制，减少不必要的依赖 | 快速解构多个属性，方便整体使用 |
| 性能 | 略好，因为它只创建了一个 ref |
略差，因为它会为所有属性创建 ref |
总的来说，toRef 更加灵活，可以对特定属性进行精细控制，但需要手动为每个属性创建 ref。toRefs 更加方便，可以批量解构响应式对象，但会为所有属性创建 ref，可能会造成一些性能上的浪费。
选择原则：
- 如果只需要解构少量属性，或者需要对特定属性进行精细控制，使用
toRef。 - 如果需要解构多个属性，并且不需要对特定属性进行特殊处理，使用
toRefs。
第四章：进阶用法：小心有坑！
虽然 toRef 和 toRefs 很强大，但也有一些需要注意的地方：
-
只对响应式对象有效：
toRef和toRefs只能用于响应式对象。如果你尝试将它们用于普通对象，它们会返回undefined或普通的值，而不会创建ref。 -
深层嵌套的响应式对象：
toRefs可以处理深层嵌套的响应式对象，但需要注意，它只会将第一层属性转换为ref。如果需要对深层嵌套的属性也进行响应式解构，需要手动使用toRef。import { reactive, toRefs, toRef } from 'vue'; const state = reactive({ name: '张三', address: { city: '北京', street: '长安街' } }); const stateRefs = toRefs(state); console.log(stateRefs.address.value.city); // 输出: 北京 state.address.city = '上海'; console.log(stateRefs.address.value.city); // 输出: 上海! 响应式还在！ const cityRef = toRef(state.address, 'city'); // 手动为 city 创建 ref console.log(cityRef.value); // 输出: 上海 cityRef.value = '广州'; console.log(state.address.city); // 输出: 广州! -
toRefs的返回值不是响应式的：toRefs返回的对象本身并不是响应式的。也就是说，如果你向这个对象添加新的属性，这些属性不会自动变成ref。import { reactive, toRefs } from 'vue'; const state = reactive({ name: '张三' }); const stateRefs = toRefs(state); stateRefs.age = 30; // 错误！ age 不是 ref stateRefs.age = ref(30); // 正确做法，手动创建 ref -
避免过度使用
toRefs： 虽然toRefs很方便，但过度使用可能会导致性能问题。如果只需要解构少量属性，或者需要对特定属性进行精细控制，最好还是使用toRef。
第五章：实战演练：打造一个响应式计数器
为了更好地理解 toRef 和 toRefs 的用法，我们来做一个简单的响应式计数器。
<template>
<div>
<h1>计数器</h1>
<p>当前计数：{{ count }}</p>
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
const increment = () => {
state.count++;
};
const decrement = () => {
state.count--;
};
return {
...toRefs(state), // 使用 toRefs 解构响应式对象
increment,
decrement
};
}
};
</script>在这个例子中，我们使用 toRefs 将 state 对象中的 count 属性转换为 ref，然后在模板中直接使用 count，就可以实现响应式的计数器。
第六章：总结：响应式解构，不再迷路
toRef 和 toRefs 是 Vue 3 Composition API 中非常重要的工具，它们可以帮助我们安全地解构响应式对象，避免响应性丢失。
toRef用于为单个属性创建ref，适用于解构少量属性或需要对特定属性进行精细控制的场景。toRefs用于为所有属性创建ref，适用于批量解构多个属性的场景。
掌握了 toRef 和 toRefs，你就可以在 Composition API 中轻松应对各种响应式解构的挑战，写出更加健壮和可维护的代码。
结束语：
希望今天的讲座能帮助大家更好地理解 toRef 和 toRefs。记住，响应式解构虽然方便，但也需要谨慎使用，选择合适的工具才能事半功倍！ 祝大家编程愉快！