Vue 3 中 watch 与 watchEffect 的竞态问题与清理副作用实践
在 Vue 3 的 Composition API 里,watch 和 watchEffect 是处理响应式副作用的常用工具。但很多人在搜索框联想、路由参数变化后请求接口、分页切换等场景下,会碰到一个隐蔽的问题:先发出的请求可能后返回,覆盖掉后发出请求的结果,导致界面显示的数据和当前条件不一致。这类竞态问题在开发环境里不容易稳定复现,上线后却可能因为网络抖动频繁出现。文章会从实际代码出发,分析 watch 和 watchEffect 中异步副作用的执行顺序,解释 onCleanup 回调的触发时机,并给出用 AbortController 或忽略标记来取消过期请求的写法。同时也会对比 watc...