在 Vue 3 的响应式系统中，当你从响应式对象（如 reactive 创建的对象）中解构属性时，解构出的属性会失去响应性。这是由 Vue 3 的响应式实现机制决定的，具体原因如下：
1. 响应式对象的实现原理
Vue 3 使用 Proxy 来实现响应式对象。当你通过 reactive() 创建一个响应式对象时，实际上创建了一个 Proxy 代理对象。这个代理会跟踪属性的访问和修改，并在属性变化时触发依赖更新。
示例：
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
此时，state.count 和 state.message 是响应式的，它们的修改会触发视图更新。
2. 解构赋值的问题
当你从响应式对象中解构属性时，实际上是在获取属性的当前值，而不是获取一个响应式引用。
示例：
// 从响应式对象中解构属性
const { count, message } = state;
// 此时 count 和 message 是普通值，不是响应式引用！
console.log(count); // 0
console.log(message); // 'Hello'
- 原因：解构赋值相当于将
state.count的当前值（0）赋值给变量count，而count和message只是普通的 JavaScript 变量，与原始的响应式对象state没有关联。 - 失去响应性：修改
state.count会触发视图更新，但直接修改解构后的count或message不会触发更新。
3. 为什么失去响应性？
(1) Proxy 的局限性
Proxy 只能拦截对代理对象（即 state）的直接访问，但无法跟踪解构后的变量。例如：
// 解构后，count 是一个普通值
let { count } = state;
// 修改 count 不会触发 Proxy 的 set 拦截
count++; // 无效！
(2) 值拷贝
解构赋值本质上是将属性的值拷贝给变量。对于基本类型（如 number、string），拷贝的是值本身；对于对象类型，拷贝的是引用。但无论如何，解构后的变量不再与响应式对象关联。
4. 解决方案
为了保持解构后的属性的响应性，需要使用 toRef 或 toRefs 方法。
(1) 使用 toRefs
toRefs 将响应式对象的每个属性转换为一个 ref 对象，保持响应性。
import { reactive, toRefs } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
// 使用 toRefs 转换
const { count, message } = toRefs(state);
// 此时 count 和 message 是 ref 对象，保持响应性
console.log(count.value); // 0
// 修改原响应式对象，视图会更新
state.count++;
(2) 使用 toRef
如果只需要解构单个属性，可以使用 toRef：
import { reactive, toRef } from 'vue';
const state = reactive({
count: 0,
message: 'Hello'
});
const count = toRef(state, 'count'); // 保持响应性
5. 为什么 toRefs 能解决问题？
toRefs 的工作原理是将响应式对象的每个属性转换为一个 ref 对象。ref 对象内部通过 .value 访问值，并且保持与原始响应式对象的关联。例如：
// 转换后的 ref 对象
const countRef = toRef(state, 'count');
// 修改原对象
state.count = 10;
console.log(countRef.value); // 10（同步更新）
// 修改 ref 对象
countRef.value = 20;
console.log(state.count); // 20（同步更新）
6. 总结
| 场景 | 行为 |
|---|---|
| 直接解构响应式对象 | 解构出的属性失去响应性（普通值） |
使用 toRefs 后解构 | 解构出的属性是 ref 对象，保持响应性 |
| 直接修改原响应式对象 | 视图更新（响应式系统正常工作） |
| 直接修改解构后的普通变量 | 无效（不会触发视图更新） |
修改 toRefs 转换后的 ref 对象 | 有效（通过 .value 修改，触发视图更新） |
7. 示例：对比普通解构和 toRefs
普通解构（失去响应性）：
<template>
<div>
<button @click="increment">Count: {{ count }}</button>
</div>
</template>
<script setup>
import { reactive } from 'vue';
const state = reactive({ count: 0 });
const { count } = state; // 解构后，count 是普通值
const increment = () => {
count++; // 无效！视图不会更新
};
</script>
使用 toRefs（保持响应性）：
<template>
<div>
<button @click="increment">Count: {{ count }}</button>
</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue';
const state = reactive({ count: 0 });
const { count } = toRefs(state); // 解构后，count 是 ref 对象
const increment = () => {
count.value++; // 有效！视图更新
};
</script>
8. 扩展：在组合式 API 中的最佳实践
在组合式 API 中，推荐始终使用 toRefs 或 toRef 来解构响应式对象，以保持响应性：
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
message: 'Hello'
});
return {
...toRefs(state) // 保持所有属性的响应性
};
}
};
