Vue 3 中 watch 和 watchEffect 的竞态问题与清理函数实战
在 Vue 3 的 Composition API 里,watch 和 watchEffect 用起来比 Options API 的 watch 灵活不少,但副作用异步执行时很容易踩到竞态。比如搜索框输入关键字后发请求,用户快速输入 a、ab、abc,三个请求返回顺序不确定,最终页面可能显示 a 的结果。这个问题在前端 CRUD 后台、实时搜索、详情页切换场景里很常见。根本原因是侦听器回调本身没有“取消上一次请求”的机制,而 HTTP 请求或定时器又不会因为组件状态变化自动中止。Vue 提供了 onCleanup 回调,配合 AbortController 或一个自增 token,可以保证只有...