Vue 3 reactive 与 toRefs：避免解构赋值带来的响应式丢失
大家好，今天我们要深入探讨 Vue 3 中一个常见但容易被忽略的问题：如何在使用 reactive 创建响应式对象后，避免因解构赋值而导致的响应式丢失。这个问题如果不理解透彻，可能会导致你的 Vue 组件行为异常，数据更新无法正确反映在视图上。
1. reactive：创建响应式对象
在 Vue 3 中，reactive 是一个核心 API，用于将一个普通的 JavaScript 对象转换成一个响应式对象。这意味着当这个对象的属性发生变化时，所有依赖于这些属性的视图都会自动更新。
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello Vue 3!'
});
console.log(state.count); // 0
state.count++;
console.log(state.count); // 1 (触发响应式更新)在这个例子中，state 对象的所有属性都被转换成了响应式属性。任何对 state.count 的修改都会触发 Vue 的响应式系统，从而更新相关的视图。
2. 解构赋值的陷阱
解构赋值是 ES6 中一个非常方便的语法特性，它可以让我们从对象或数组中提取值，并将其赋给新的变量。然而，当我们将解构赋值应用到 reactive 创建的响应式对象时，就会遇到一个问题：解构赋值会创建一个新的、独立的变量，而这个变量与原始的响应式对象失去了联系。
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello Vue 3!'
});
const { count, message } = state;
console.log(count); // 0
console.log(message); // Hello Vue 3!
count++;
console.log(count); // 1 (局部变量 count 的值改变)
console.log(state.count); // 0 (state.count 的值没有改变)在这个例子中，count 和 message 变量是 state.count 和 state.message 的副本，而不是它们的引用。因此，修改 count 的值不会影响 state.count 的值，也不会触发 Vue 的响应式更新。这会导致视图无法正确反映数据的变化。
3. toRefs：保持响应式的关键
为了解决解构赋值带来的响应式丢失问题，Vue 3 提供了 toRefs API。toRefs 可以将一个响应式对象转换为一个普通对象，其中原始响应式对象的每一个属性都变成了一个 ref。ref 是一个包含内部值的响应式对象，我们可以通过 .value 属性来访问或修改这个内部值。
import { reactive, toRefs } from 'vue';
const state = reactive({
count: 0,
message: 'Hello Vue 3!'
});
const { count, message } = toRefs(state);
console.log(count.value); // 0
console.log(message.value); // Hello Vue 3!
count.value++;
console.log(count.value); // 1
console.log(state.count); // 1 (state.count 的值也改变了)在这个例子中，count 和 message 变量不再是 state.count 和 state.message 的副本，而是指向它们的 ref。因此，修改 count.value 的值会影响 state.count 的值，并触发 Vue 的响应式更新。
4. toRef：针对单个属性的转换
除了 toRefs，Vue 3 还提供了 toRef API，用于将响应式对象的单个属性转换为 ref。这在只需要保持部分属性的响应式时非常有用。
import { reactive, toRef } from 'vue';
const state = reactive({
count: 0,
message: 'Hello Vue 3!'
});
const countRef = toRef(state, 'count');
console.log(countRef.value); // 0
countRef.value++;
console.log(countRef.value); // 1
console.log(state.count); // 1 (state.count 的值也改变了)在这个例子中，countRef 是 state.count 的 ref，修改 countRef.value 会影响 state.count 的值。
5. ...toRefs(state)：在 Composition API 中的应用
在 Composition API 中，我们通常会将组件的状态定义在一个 setup 函数中。为了方便在模板中使用这些状态，我们可以使用 ...toRefs(state) 将响应式对象的属性转换为 ref，然后将这些 ref 返回给模板。
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
const increment = () => {
state.count++;
};
return {
...toRefs(state),
increment
};
}
};
</script>在这个例子中，...toRefs(state) 将 state.count 转换为 ref，并将其暴露给模板。因此，模板可以直接使用 count 变量，而不需要使用 count.value。当 state.count 的值发生变化时，模板会自动更新。
6. 最佳实践：何时使用 toRefs 和 toRef
-
需要解构赋值并保持响应式时： 这是
toRefs和toRef最主要的应用场景。如果你需要从响应式对象中提取属性，并确保对这些属性的修改能够触发响应式更新，那么你需要使用toRefs或toRef。 -
在 Composition API 中将状态暴露给模板时： 使用
...toRefs(state)可以方便地将响应式对象的属性转换为ref，并将其暴露给模板，从而避免在模板中使用count.value这种繁琐的语法。 -
只需要保持部分属性的响应式时： 如果你只需要保持响应式对象的某些属性的响应式，那么你可以使用
toRef来针对这些属性进行转换，而不是使用toRefs转换整个对象。
7. 常见错误及解决方案
-
忘记使用
.value访问ref的值： 当你使用toRefs或toRef将响应式对象的属性转换为ref后，你需要使用.value属性来访问或修改这个ref的值。如果你忘记使用.value，你可能会得到ref对象本身，而不是它的内部值。import { reactive, toRefs } from 'vue'; const state = reactive({ count: 0 }); const { count } = toRefs(state); console.log(count); // RefImpl {__v_isRef: true, _rawValue: 0, _shallow: false, dep: undefined, __v_isReadonly: undefined} console.log(count.value); // 0 -
过度使用
toRefs： 虽然toRefs很好用，但是过度使用它可能会导致代码难以阅读和维护。只在你需要解构赋值并保持响应式时才使用toRefs或toRef。 -
在
setup函数之外使用toRefs：toRefs通常在setup函数中使用，用于将响应式对象的状态暴露给模板。如果你在setup函数之外使用toRefs，可能会导致一些问题。
8. 示例：一个完整的 Vue 组件
下面是一个完整的 Vue 组件，演示了如何使用 reactive 和 toRefs 来创建一个响应式的计数器：
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<input type="text" v-model="message">
<p>Message: {{ message }}</p>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello Vue 3!'
});
const increment = () => {
state.count++;
};
return {
...toRefs(state),
increment
};
}
};
</script>在这个组件中，我们使用 reactive 创建了一个响应式对象 state，其中包含了 count 和 message 两个属性。然后，我们使用 ...toRefs(state) 将 state 对象的属性转换为 ref，并将其暴露给模板。因此，模板可以直接使用 count 和 message 变量，而不需要使用 count.value 和 message.value。当 state.count 或 state.message 的值发生变化时，模板会自动更新。
9. 总结：响应式编程的关键
reactive 和 toRefs 是 Vue 3 中实现响应式编程的两个重要 API。理解它们的工作原理，并掌握正确的使用方法，可以帮助你避免因解构赋值而导致的响应式丢失问题，从而编写出更加健壮和可维护的 Vue 组件。toRefs 的本质是将响应式对象的属性转化为 ref，让解构赋值后的变量仍然保持对原始响应式数据的引用。在Composition API中， toRefs 与 ... 运算符结合使用，可以方便地将响应式状态暴露给模板。