Vue 3 中 watch 和 watchEffect 的刷新时机:从一次表单联动失效说起
有一个在 Vue 3 项目里很常见的场景:父组件传进来一个 props.id,子组件需要根据这个 id 去请求详情数据,同时在本地维护一份可编辑的表单副本。某次需求里,表单里有个“数量”输入框,修改数量后要自动计算总价并且把结果同步回一个隐藏字段。代码大概是这样写的:在 watchEffect 里读取 form.count 和 form.price,算出 form.total。结果发现,当用户快速连续修改数量时,总价偶尔会落后一拍,甚至出现用旧值计算的情况。排查后发现,问题不在于响应式数据本身,而是对 watch 和 watchEffect 的刷新时机理解不够。Vue 3 的侦听器默认在组件更...