watchEffect 默认不处理竞态，需通过AbortController取消旧请求、isActive标记防抖或useDebounce前置降频来解决；避免直接在其中写async逻辑。
watchEffect 在 Vue 3 中确实简洁好用，但它默认不处理竞态（race condition）——比如用户快速连续输入、频繁切换筛选条件或反复触发搜索时，后发起的请求可能比先发起的慢，导致界面显示旧数据。这不是 watchEffect 的 bug，而是它“响应即执行”的设计使然。要解决，关键不是禁用它，而是加一层控制逻辑。
用 abortController 主动取消上一次异步操作
这是最贴近原生、兼容性好且语义清晰的方式。每次 watchEffect 触发新副作用时，先调用上一次控制器的 abort()，再创建新的请求。
- 在 watchEffect 内部声明一个 controllerRef = ref(null)
- 每次执行前检查：若 controllerRef.value 存在，调用 controllerRef.value.abort()
- 新建 new AbortController() 并赋值给 controllerRef
- fetch 或 axios 请求中传入 signal: controllerRef.value.signal
注意：需确保目标 API 支持 AbortSignal（现代浏览器和 Axios 1.5+ 默认支持；如用 fetch，需手动传入 signal）。
用 isRef + cleanup 函数做轻量级防抖拦截
如果不想侵入请求层，可在 watchEffect 的清理函数中设标记，让后续执行体自行跳过已过期的任务。
- 定义 const isActive = ref(true)，并在 watchEffect 回调开头判断 if (!isActive.value) return
- 在 cleanup 函数中设置 isActive.value = false
- 新一次 watchEffect 执行时重置 isActive.value = true
这种方式不取消网络请求，只避免无效的 DOM 更新或冗余计算，适合对响应延迟不敏感但需保证视图最终一致的场景（如本地过滤、计算属性依赖更新）。
配合 useDebounce 或 useThrottle 组合式函数降频
高频交互的本质常是“输入抖动”或“重复触发”，与其在副作用里硬抗竞态，不如前置收敛变化流。
- 把原始响应式数据（如 searchKey）先用 useDebounce(searchKey, 300) 包裹
- watchEffect 监听的是防抖后的值，自然减少触发次数
- 可与上述 abort 方案叠加：防抖控频率 + abort 控请求顺序
注意：useDebounce 需自行实现或使用 @vueuse/core；其内部应基于 setTimeout + clearTimeout，而非 watchEffect 自身，否则会陷入嵌套响应循环。
避免在 watchEffect 中直接写异步逻辑的常见误区
很多人习惯这样写：
watchEffect(async () => { const res = await api.search(key.value); data.value = res; })这会导致两个问题：一是 watchEffect 不等待 Promise，无法感知异步完成；二是没有清理机制，必然产生竞态。正确做法是把 await 移到立即执行函数内，并显式处理 abort 或 isActive 标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
