Vue 3 中 ref 和 reactive 在模板自动解包上的差异与踩坑记录
在 Vue 3 的 Composition API 里,ref 和 reactive 是最常用的两个响应式声明方式。实际开发中常遇到一种情况:把 reactive 对象的某个属性重新赋值后,模板不更新;或者从 setup 返回一个 ref 后,在模板里不加 .value 就能用,但换到 reactive 对象里嵌套的 ref,行为又不一样。这些差异并不来自响应式系统本身,而是 Vue 对模板表达式做了一层“自动解包”的编译处理。理解这层机制能避开很多“数据改了页面没动”的问题,也能解释为什么在 watch 里拿到的是原始 ref 而在模板里拿到的是值。下面从模板编译、运行时解包和常见错误场景拆...