Vue 3 中 watch 与 watchEffect 的清理副作用:什么时候需要 onCleanup,怎么避免竞态请求
在 Vue 3 里用 watch 或 watchEffect 监听响应式数据并发送异步请求时,很容易碰到一个隐蔽的问题:快速切换筛选条件后,先发出的请求可能比后发出的请求更晚返回,导致页面显示旧数据。很多人第一反应是加防抖,但防抖只减少触发次数,并不能保证响应顺序。Vue 提供的 onCleanup 注册清理函数可以在副作用重新运行或组件卸载前执行,用来取消过期请求、清除定时器、断开连接。这篇文章从实际场景出发,讲清楚 watch 和 watchEffect 的回调签名差异、清理函数的执行时机,以及如何结合 AbortController 写出一份能处理竞态的请求逻辑。