Vue 3 中 ref 与 reactive 的取舍:从响应式原理到实际开发中的选择
在 Vue 3 项目里,ref 和 reactive 都能创建响应式数据,但混用之后经常遇到一些让人摸不着头脑的问题:明明改了一个对象属性,视图没更新;或者解构之后响应式就没了;又或者把 reactive 对象整体替换后页面直接白屏。这些问题的根源在于两者底层用了不同的响应式代理策略,并且对原始值、对象引用和模板解包的处理方式也不一样。这篇文章会从实际开发场景出发,先说明 ref 和 reactive 在原理上的差异,再通过几个真实代码片段分析常见陷阱,比如解构丢失响应性、替换整个对象、在模板中自动解包只发生在顶层等。最后会给出在不同数据形态和组合式函数设计下怎么选更省心,避免后期维护时反复踩...