在 Vue 3 中，为什么不能在 setup() 函数外部直接使用响应式变量（如 ref 或 reactive 创建的变量）进行解构，而需要使用 toRefs？

在 Vue 3 中，为什么不能在 setup() 函数外部直接使用响应式变量（如 ref 或 reactive 创建的变量）进行解构，而需要使用 toRefs？

在 Vue 3 的 Composition API 中，ref 和 reactive 创建的响应式对象依赖于其内部的 getter/setter 或 Proxy 机制来追踪依赖和触发更新。如果直接对 reactive 对象进行解构（例如 const { name, age } = user），会丢失响应性，因为解构后的变量是原始值的副本，不再与原始响应式对象关联。

例如：

import { reactive } from 'vue';

const user = reactive({ name: 'Alice', age: 25 });
const { name } = user; // ❌ name 不再是响应式的

此时修改 user.name 不会触发视图更新，因为 name 是一个普通字符串。

为了解决这个问题，Vue 提供了 toRefs 工具函数。toRefs 会将 reactive 对象的每个属性转换为对应的 ref，从而在解构后仍保持响应性：

import { reactive, toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 25 });
const { name, age } = toRefs(user); // ✅ name 和 age 都是 ref，保持响应性

这样，在模板中可以直接使用 name.value，或者在 setup() 返回时，由于 Vue 会自动 unwrap ref，模板中可直接写 {{ name }}。

注意：toRefs 适用于 reactive 对象；对于 ref 创建的单个响应式变量，不需要 toRefs，直接返回即可保持响应性。