在 Vue 3 中，为什么不能在 setup() 外部直接使用响应式变量（如 ref 或 reactive）的值，而必须通过 .value 访问？

在 Vue 3 中，为什么不能在 setup() 外部直接使用响应式变量（如 ref 或 reactive）的值，而必须通过 .value 访问？

回答：
因为在 Vue 3 中，ref 创建的是一个包含 value 属性的响应式引用对象（reference object），而不是直接的原始值。为了在模板中自动解包（unwrap）并保持响应性，Vue 在模板编译阶段会自动为 ref 添加 .value。但在 JavaScript 逻辑中（如 setup() 函数内部或外部），必须显式通过 .value 访问或修改其内部值，否则操作的是 ref 对象本身，而非其包装的值。

解析：

• ref 返回的是一个对象：const count = ref(0) 实际上等价于 { value: 0 }。
• Vue 的响应式系统依赖于对 .value 的读取和赋值来追踪依赖和触发更新。
• 在模板中，Vue 编译器会自动将 {{ count }} 转换为 count.value，因此无需手动写 .value。
• 但在 JavaScript 代码中（包括 setup() 内部），必须写 count.value 才能正确读取或修改响应式数据。
• 如果在 setup() 外部（比如一个普通函数）使用 ref 变量，同样需要 .value，因为此时已脱离模板自动解包机制。

示例：

import { ref } from 'vue'

const count = ref(0)
console.log(count)       // { value: 0 }
console.log(count.value) // 0

// 错误：不会触发响应式更新
count = 1 // ❌ 类型错误（若使用 TypeScript）或失去响应性

// 正确
count.value = 1 // ✅