vue 3 的 ref 自动解包是编译期识别与运行时拦截协同的机制，仅在模板顶层直接使用 ref 变量时生效（如{{count}}、v-if="loading"），嵌套或运算时失效；脚本中必须显式使用.value。
Vue 3 的 ref 自动解包不是“写法省略”，而是一套编译期识别 + 运行时拦截协同工作的机制。它在模板中生效，在脚本中不生效——这个边界必须分清，否则容易出现值取错、更新不触发、类型报错等问题。
模板中哪些地方会自动解包
Vue 编译器在生成渲染函数前，会静态分析模板语法，对以下**顶层直接使用 ref 变量本身**的场景自动插入 .value：
- 插值表达式：
{{ count }}→ 实际读取count.value - v-if / v-show：
v-if="loading"→ 判断的是loading.value - v-bind 属性绑定：
:disabled="isDisabled"→ 绑定的是isDisabled.value - v-model 表单绑定：
<input v-model="msg">→ 内部自动读写msg.value - 作为 prop 传给子组件：
<child :title="titleRef"></child>→ 子组件接收的是titleRef.value，不是 ref 对象 - reactive 对象的 ref 属性：
const state = reactive({ count: ref(0) })，访问state.count时自动解包（这是 reactive 的 get 拦截器行为）
模板中哪些地方不会自动解包
只要 ref 被嵌套、参与运算或脱离“直接变量引用”语义，解包就立即失效。此时你拿到的是 ref 对象本身，不是它的值：
- 对象属性访问：
{{ user.count }}（user是普通对象或 reactive，但count是 ref）→ 输出[object Object] - 数组索引访问：
{{ list[0] }}（list是[ref(1), ref(2)]）→ 显示[object Object] - 运算表达式：
{{ count + 1 }}（count是ref(5)）→ 触发toString()，结果为"[object Object]1" - 函数调用参数：
{{ format(count) }}→ 函数收到的是 ref 实例，需在函数内手动处理.value - 解构后赋值：
const { count } = toRefs(obj)仍可解包；但若写成const c = count，后续{{ c }}仍能解包（因仍是 ref），而c + 1就会出问题
脚本中 ref 必须始终用 .value
JS 逻辑里不存在自动解包。无论 ref 包裹的是数字、字符串还是对象，所有读写都必须显式通过 .value：
- 读取：
console.log(count.value)、if (loading.value) { ... } - 修改：
count.value = 10、user.value.name = 'Tom'（注意：对象内部属性不自动响应，除非该对象本身是 reactive） - 函数参数传递：
api.fetchData(count.value)，不能传count本身（除非函数设计为接收 ref） - 响应式依赖收集只发生在
.value被访问时，所以漏掉.value会导致视图不更新
为什么模板里禁止写 .value
Vue 模板不允许出现 {{ count.value }} 这类写法，不是技术限制，而是设计约束：
- 它破坏声明式抽象：模板应描述“要显示什么”，而不是“怎么取值”
- 编译器已为你做了转换，手动加
.value属于冗余且易错（比如{{ count.value + 1 }}依然会出错） - 当你想写
.value时，往往说明数据组织不合理：比如把 ref 塞进深层对象属性，或该用computed提前展开却没做 - 正确做法是用
computed封装逻辑：const displayName = computed(() => user.name.value)，再在模板中用{{ displayName }}
