在 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 变量进行解构（如 const { count } = setupReturn），会导致响应式丢失，因为解构操作会将 count 变成一个普通值（即 0），不再具有响应性。

为了解决这个问题，Vue 提供了 toRefs() 函数。toRefs() 会将一个响应式对象（通常是 reactive() 创建的对象）的所有属性转换为 ref 对象，从而在解构后仍保持响应性。

示例说明：

import { ref, toRefs } from 'vue';

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

    // 错误方式：直接解构 reactive 对象会丢失响应性
    // const { name, age } = state;

    // 正确方式：使用 toRefs 保持响应性
    return { ...toRefs(state) };
  }
}

对于单独的 ref 变量（非 reactive 对象中的属性），通常不需要 toRefs，因为可以直接返回 ref 本身（如 return { count }），模板会自动 unwrap 其 value。但如果将多个 ref 放在一个对象中并希望整体解构，则也应考虑使用 toRefs 或 toRef。

总结：toRefs 的核心作用是在解构响应式对象时保留每个属性的响应性，避免因解构导致的响应式断开。