在 Vue 3 中使用 Composition API 时，为什么不能在 setup() 外部直接访问 ref 定义的响应式变量的原始值？

在 Vue 3 中使用 Composition API 时，为什么不能在 setup() 外部直接访问 ref 定义的响应式变量的原始值？

回答与解析：

在 Vue 3 的 Composition API 中，通过 ref() 创建的响应式变量实际上是一个包含 value 属性的对象（即 Ref 对象），而不是原始值本身。例如：

import { ref } from 'vue'
const count = ref(0)
console.log(count)        // { value: 0 }
console.log(count.value)  // 0

在 setup() 函数内部，Vue 通过**自动解包（auto-unwrapping）**机制，在模板中或使用 reactive 包裹时会自动读取 .value，但在 setup() 外部（比如在普通的工具函数、全局作用域或非 Vue 上下文中），这种自动解包不会发生，因此必须显式访问 .value 才能获取或修改原始值。

此外，如果将 ref 作为 reactive 对象的属性，Vue 也会自动解包：

const state = reactive({
  count: ref(0)
})
console.log(state.count) // 0（自动解包）

但若在 setup() 外部直接引用该 ref 变量（如从函数返回后在组件外使用），则仍需通过 .value 访问。

总结：ref 是一个包装对象，只有在 Vue 的响应式系统内部（如模板、reactive、setup 返回值被模板使用时）才会自动解包。在外部作用域中，必须手动使用 .value 访问其原始值。这是为了保持响应式系统的可追踪性和一致性。