Vue3 响应式常见误区排查清单

Vue3 上手一段时间后，很多人都会说一句“组合式 API 更自由了”。这句话没错，但自由的另一面是，响应式 bug 也更容易藏起来了。

尤其是在中后台页面里，表格、筛选器、弹窗、表单状态经常交织在一起，一旦对 ref 和 reactive 的边界不够敏感，问题会很隐蔽。

第一个坑通常是解构

最常见也最容易被忽略的问题，就是把一个响应式对象直接解构出来用。写的时候很顺手，结果后续更新发现视图不跟着变。

这类问题本质上不是 Vue3 难，而是我们在 JavaScript 层把响应式引用提前拆断了。

ref 和 reactive 不要随手混着包

实际项目里，经常会看到有人先写一个 reactive 对象，然后又在里面塞 ref，或者反过来先定义很多 ref 再拼成一个对象。不是说完全不行，而是混用过多后，团队很难一眼看清状态更新路径。

我更倾向于:

• 单值状态优先 ref
• 有明确结构的表单或查询对象再考虑 reactive

保持这个习惯，排查问题会轻松很多。

watch 要明确监听意图

很多响应式 bug 不是状态没更新，而是 watch 监听错了对象，或者副作用触发过于频繁。比如把整个查询对象深度监听，然后每次任意字段变化都去请求列表，页面就会变得很抖。

比起“监听一切”，我更建议只监听真正会驱动副作用的那几个字段。

模板能算出来的值，不要提前存状态

有些页面为了图省事，会把本来可以由现有状态推导出来的显示值再单独存一份，结果后面出现同步问题。Vue3 的响应式系统已经足够强，能计算出来的内容尽量交给 computed，不要自己维护双份真相。

小结

Vue3 响应式最常见的问题，几乎都不是框架 bug，而是状态边界和副作用边界没有想清楚。把解构、类型选择、watch 粒度和派生状态这几个点盯住，很多问题都会提前消失。