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

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

在 Vue 3 的 Composition API 中，使用 ref 或 reactive 创建的响应式数据依赖于其包装对象来维持响应性。如果直接对 reactive 返回的对象进行解构（例如 const { name, age } = reactive({ name: 'Alice', age: 25 })），会丢失其响应性，因为解构本质上是将值赋给新的本地变量，这些变量不再是响应式的。

同样地，对于 ref，虽然可以单独解构出 .value，但这样也会破坏与模板或其他响应式系统的联动。

为了解决这个问题，Vue 3 提供了 toRefs 工具函数。toRefs 会将一个响应式对象的所有属性转换为 ref 对象，这样即使解构后，每个属性依然保持响应性。

示例：

import { reactive, toRefs } from 'vue'

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

    // 错误做法：直接解构会失去响应性
    // const { name, age } = state

    // 正确做法：使用 toRefs 保持响应性
    const { name, age } = toRefs(state)

    return {
      name,
      age
    }
  }
}

在这个例子中，name 和 age 都是 ref 对象，可以在模板中直接使用（Vue 会自动 unwrap ref），同时在 setup 内部也可以通过 name.value 访问或修改值，且视图会随之更新。

总结：toRefs 的作用是在解构响应式对象时保留每个属性的响应性，避免因 JavaScript 解构赋值导致响应式连接断开的问题。