Vue 3 中 watch 和 watchEffect 的竞态问题与中断请求实践
在 Vue 3 的日常开发里,监听响应式数据并触发异步请求非常常见,比如搜索框输入联想、路由参数变化后重新拉取列表、筛选条件变更后刷新表格。只要回调里存在异步操作,就很容易遇到“旧请求晚于新请求返回”的竞态问题,最终界面显示的是过期数据。这个问题在快速输入、频繁切换条件时几乎必然出现,而很多人会把它误认为接口不稳定或状态管理出错。这篇文章从实际场景出发,先解释 watch 和 watchEffect 在异步回调中的执行差异,再给出利用 AbortController 中断旧请求、利用 onCleanup 清理副作用的写法,同时讨论在组件卸载、路由跳转时如何避免无效 setState 和内存泄漏...