Vue 3 的 ref 自动解包仅发生在模板中顶层直接使用 ref 变量的场景（如{{ count }}、v-if="loading"、prop 传递），而对象属性访问、数组索引、运算表达式、函数参数等均不解包，JS 逻辑中必须始终显式使用.value。
Vue 3 的 ref 自动解包不是“省略写法”，而是一套有明确边界的编译与运行时机制。它让模板更简洁，但一旦用错场景，就会出现值变对象、计算失效、更新不触发等问题。
模板中哪些地方会自动解包
只有在**直接使用 ref 变量本身**的上下文中，Vue 才会自动展开 .value：
- 插值表达式：{{ count }} → 显示 0（count 是 ref(0)）
- v-if / v-show 绑定：（loading 是 ref(true)）
- 作为 prop 传给子组件：
→ 子组件接收的是字符串，不是 ref 对象
哪些情况不会解包，容易出错
只要 ref 被嵌套、参与运算或作为中间值，解包就立即失效：
- {{ state.user.name }}：如果 state 是 reactive({ user: ref({ name: 'Alice' }) })，name 是普通属性，不响应；若 user 是 ref({ name: 'Alice' })，则 state.user.name 在模板中虽能读取（因 reactive 内部对 ref 属性自动解包），但 name 本身不响应
- {{ list[0] }}：list 是 [ref(1), ref(2)]，输出 [object Object]
- {{ count + 1 }}：count 是 ref(5)，结果是 "[object Object]1"
- {{ format(count) }}：函数收到的是 ref 对象，不是数字，需在函数内手动处理 .value
JS 逻辑中必须始终用 .value
无论 ref 包裹的是原始值还是对象，脚本里访问和修改都必须显式写 .value：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 读取：count.value、user.value.name、items.value[0]
- 赋值：count.value = 10、user.value = { name: 'Tom' }
- 注意：对 ref 包裹的对象，.value.age++ 不会让 age 响应式更新——因为 age 是普通属性，不是 ref；如需响应，应让 age 本身也是 ref，或改用 reactive
ref 和 reactive 混合使用的解包规则
它们配合时的解包是单向且仅限一层的：
- reactive 中放 ref：const s = reactive({ count: ref(0) }) → s.count 直接读写，自动同步到原始 ref
- ref 中放 reactive：const r = ref(reactive({ x: 1 })) → r.x 无效，必须 r.value.x
- 深层嵌套也只解一层：reactive({ a: { b: ref(1) } }) → a.b 可直接用，但 a.b 不再是 ref，只是数值 1
不复杂但容易忽略：解包是 Vue 编译器和响应式系统协同的结果，不是语法糖。写模板时多问一句“这个变量是不是直接出现在顶层绑定位置”，就能避开大多数陷阱。
