Vue 3 中 watch 与 watchEffect 的竞态问题:如何避免过期的异步结果覆盖状态
在 Vue 3 的日常开发里,watch 和 watchEffect 用来响应数据变化并执行副作用。当副作用里包含异步请求时,一个隐蔽但很常见的问题就会出现:多个请求并发,后发出的请求可能先返回,导致旧请求的结果覆盖掉新请求的结果。比如搜索框输入关键字,每次输入都触发一次 fetch,用户快速输入「vue」时,请求 v、vu、vue 几乎同时发出,如果 v 的响应最后才到,界面就会显示错误的内容。这类竞态在自动完成、分页切换、路由参数变化、筛选条件联动等场景里都会出现,根本原因是异步任务的完成顺序无法保证。这篇文章从实际代码出发,讲清楚 Vue 3 中 watch 的清理机制、onCleanu...