在 Vue 3 的 Composition API 中，为什么不能在 setup() 外部直接使用 ref 定义的响应式变量进行解构，而需要使用 toRefs()？

在 Vue 3 的 Composition API 中，为什么不能在 setup() 外部直接使用 ref 定义的响应式变量进行解构，而需要使用 toRefs()？

回答与解析：

在 Vue 3 的 Composition API 中，使用 ref 创建的响应式变量本质上是一个包含 value 属性的对象。例如：

const count = ref(0); // 实际上是 { value: 0 }

如果在 setup() 返回的对象中直接解构这个 ref，例如：

setup() {
  const count = ref(0);
  return {
    ...count // ❌ 错误做法，或在模板外直接解构为普通变量
  };
}

或者在组件外部（如函数参数、对象解构）中直接解构：

const { value } = count; // ❌ 失去响应性

这样会将 value 提取为一个普通值（如 number、string），不再是响应式的引用，后续对 count.value 的修改不会触发视图更新。

为了解决这个问题，Vue 3 提供了 toRefs() 函数。它会将一个响应式对象（如 reactive 创建的对象）或包含 ref 的对象转换为一个普通对象，但每个属性都被包装成 ref，从而在解构后仍保持响应性。

示例：

import { ref, toRefs } from 'vue';

setup() {
  const state = reactive({
    name: 'Alice',
    age: 25
  });

  // 如果直接 return { ...state }，解构后失去响应性
  // 正确做法：
  return {
    ...toRefs(state) // 每个属性都是 ref，解构后仍响应
  };
}

对于单独的 ref 变量，通常不需要 toRefs，直接 return 即可，因为 Vue 模板中会自动 unwrap ref。但在需要将多个 ref 或 reactive 对象以解构方式传递时（例如在组合函数中返回多个状态），使用 toRefs 能确保解构后的变量仍具备响应性。

总结：

• ref 是一个带 .value 的对象，直接解构会丢失响应性。
• toRefs 用于将 reactive 对象的每个属性转换为 ref，使得解构后仍保持响应式连接。
• 在 setup() 中返回状态时，若需解构 reactive 对象，应使用 toRefs；对于单独的 ref，直接返回即可。