Vue 3 中 watch 与 watchEffect 的清理副作用:何时用 onCleanup 避免竞态请求
在 Vue 3 的组合式 API 里,watch 和 watchEffect 是处理响应式副作用的常用工具。一个典型的开发场景是:监听搜索关键词、路由参数或分页条件的变化,然后发起异步请求。如果用户快速切换条件,先发出的请求可能比后发出的请求更晚返回,导致旧数据覆盖新数据。这个问题在搜索框输入、标签切换、分页加载中都很常见。Vue 提供了 onCleanup 回调,允许在副作用重新执行或组件卸载时取消未完成的请求。但很多人只是简单地用 watch 监听,忽略了清理逻辑,结果在浏览器网络面板中看到多个 pending 请求,页面数据偶尔错乱。这篇文章会从实际代码出发,说明 watch 和 wat...