Vue 3 的 watch 默认不保证异步任务执行顺序，需通过 abortController 取消过期请求、ref 标识过滤过期响应或 watchEffect 的 onInvalidate 清理机制，确保仅最后一次变更生效。
Vue 3 的 watch 默认不保证异步任务的执行顺序，当监听值频繁变化时，后触发的 watch 响应可能比先触发的更早完成（比如新请求返回更快），导致界面状态与最新数据不一致——这就是常说的“请求回调错乱”。解决核心是：**取消或忽略过期的异步操作，只响应最后一次有效变更**。
用 abortController 主动取消未完成的请求
现代浏览器支持 AbortController，可在发起 fetch 请求时传入 signal，在 watch 回调重新触发前调用 abort()：
- 每次 watch 触发时，先调用上一次控制器的
abort()（若存在） - 新建
AbortController，保存引用供下次取消用 - fetch 时将
controller.signal作为选项传入 - 捕获
AbortError并静默处理，避免报错干扰
✅ 适合原生 fetch、支持 signal 的库（如 axios v1.2+ 也支持 AbortSignal）
用 ref 记录最新请求标识，过滤过期响应
为每次 watch 触发生成唯一标识（如递增 id 或时间戳），在异步回调中比对当前标识是否仍匹配：
立即学习“前端免费学习笔记（深入）”；
- 定义
const requestId = ref(0) - watch 回调内执行
requestId.value++，并保存当前值const curId = requestId.value - 请求完成后，检查
if (curId !== requestId.value) return
✅ 兼容所有请求方式（包括不支持 abort 的 Promise 封装），逻辑清晰易调试
用 watchEffect + cleanup 函数自动管理副作用
watchEffect 提供了 onInvalidate 清理机制，天然适合处理“竞态”：
- 在副作用函数内部调用
onInvalidate(() => { /* 取消或标记失效 */ }) - 可结合 Promise 取消（如 axios 的 CancelToken 已废弃，推荐用 signal）或自定义标记
- 每次新副作用运行前，自动触发上一次注册的清理函数
✅ 更响应式、更 Vue 风格，减少手动 ref 管理
避免直接在 watch 中链式调用多个异步操作
如果业务需“A 完成后再触发 B”，不要写成 watch(..., async () => { await apiA(); await apiB(); })：
- watch 本身不阻塞后续变更，多次触发会并发执行，无法控制串行顺序
- 应改用
async/await + 状态标记或Promise 队列显式控制流程 - 更推荐拆分为独立逻辑：A 成功后更新某个 ref，再用另一个 watch 监听该 ref 触发 B
✅ 保持 watch 轻量，职责单一，便于测试和复用
不复杂但容易忽略。关键不是等所有请求做完，而是确保只有“最新一次”的结果能影响状态。
