在 Vue 3 的 Composition API 里，`watch` 和 `watchEffect` 用起来比 Options API 的 `watch` 灵活不少，但副作用异步执行时很容易踩到竞态。比如搜索框输入关键字后发请求，用户快速输入 `a`、`ab`、`abc`，三个请求返回顺序不确定，最终页面可能显示 `a` 的结果。这个问题在前端 CRUD 后台、实时搜索、详情页切换场景里很常见。根本原因是侦听器回调本身没有“取消上一次请求”的机制，而 HTTP 请求或定时器又不会因为组件状态变化自动中止。Vue 提供了 `onCleanup` 回调，配合 `AbortController` 或一个自增 token，可以保证只有最后一次触发的异步结果被采纳。下面用真实可运行的代码梳理几种处理方式。

## 问题复现

假设有一个搜索组件：

```vue
<script setup>
import { ref, watch } from 'vue'

const keyword = ref('')
const result = ref([])

watch(keyword, async (val) => {
 if (!val) {
 result.value = []
 return
 }
 const res = await fetch(`/api/search?q=${encodeURIComponent(val)}`)
 const data = await res.json()
 result.value = data
})
</script>

<template>
 <input v-model="keyword" />
 <ul>
 <li v-for="item in result" :key="item.id">{{ item.name }}</li>
 </ul>
</template>
```

网络慢的时候，输入 `abc` 后 `a` 的响应先回来，`result` 就被旧数据覆盖。这不是 Vue 的 bug，而是异步副作用没有做失效处理。

## 用 onCleanup 取消上一次请求

`watch` 和 `watchEffect` 的回调都接收一个 `onCleanup` 函数，注册的清理函数会在下一次回调执行前、以及侦听器停止时调用。结合 `AbortController`：

```vue
<script setup>
import { ref, watch } from 'vue'

const keyword = ref('')
const result = ref([])
const loading = ref(false)

async function search(val, signal) {
 loading.value = true
 try {
 const res = await fetch(
 `/api/search?q=${encodeURIComponent(val)}`,
 { signal }
 )
 if (!res.ok) throw new Error(res.statusText)
 result.value = await res.json()
 } catch (err) {
 if (err.name === 'AbortError') return
 result.value = []
 console.error(err)
 } finally {
 // 这里只处理本次请求对应的 loading，避免旧请求提前关闭 loading
 if (!signal.aborted) loading.value = false
 }
}

watch(keyword, (val, _, onCleanup) => {
 if (!val) {
 result.value = []
 return
 }
 const controller = new AbortController()
 onCleanup(() => controller.abort())
 search(val, controller.signal)
})
</script>
```

注意 `onCleanup` 是 watch 回调的第三个参数，`watchEffect` 里则是第一个参数：

```js
watchEffect((onCleanup) => {
 const controller = new AbortController()
 onCleanup(() => controller.abort())
 fetch(`/api/detail/${id.value}`, { signal: controller.signal })
})
```

`AbortController` 的兼容性已经足够好，现代浏览器和 Node 18+ 都支持。请求被 abort 后，`fetch` 会抛出 `AbortError`，代码里要显式判断，避免把它当成业务错误弹 toast。

## 不能取消的场景用 token 标记

有些异步操作没有原生的取消接口，比如第三方 SDK 的回调、`setTimeout`、或者是 WebSocket 消息处理。这时用一个自增 token 表示“当前有效请求”：

```js
let requestId = 0

watch(keyword, async (val) => {
 const currentId = ++requestId
 const data = await someSdk.search(val)
 if (currentId !== requestId) return
 result.value = data
})
```

判断放在赋值之前，旧请求即使晚到也会被丢弃。这个思路和 `AbortController` 等价，只是把“取消”变成了“忽略”。项目里如果既有 fetch 又有 SDK 调用，两种方式可以混用，但要统一风格，否则维护时会分不清哪个异步操作受控。

## watch 的 flush 时机对竞态的影响

`watch` 默认 `flush: 'pre'`，在组件更新前执行；`flush: 'post'` 在 DOM 更新后；`flush: 'sync'` 同步执行。很多竞态问题其实是侦听器触发次数比预期多导致的。比如同时侦听多个 ref：

```js
watch([keyword, page], ([kw, p]) => {
 fetchList({ kw, p, signal })
})
```

keyword 和 page 几乎同时变化时，默认会合并成一次触发（同一 tick 内），但如果分别在 `await` 前后修改，就会触发两次，产生两个请求。这种场景更适合用 `watchEffect` 把依赖收拢到一起，或者先做一层防抖。

不要在 watch 回调里写“只有首次才执行”的逻辑靠一个外部 flag 判断，因为 flag 和异步返回的顺序仍然可能错乱。要控制“只处理最新一次”，就用上面的 token 或 abort，不要依赖 flag。

## 组件卸载时的清理

`onCleanup` 在组件卸载时也会执行，所以不需要额外写 `onUnmounted` 去 abort。但有一种情况例外：请求是在事件处理函数里发起的，而不是在 watch 里。比如点击按钮刷新列表，此时需要手动在 `onUnmounted` 里 abort：

```js
let controller = null

async function refresh() {
 controller?.abort()
 controller = new AbortController()
 const res = await fetch('/api/list', { signal: controller.signal })
 list.value = await res.json()
}

onUnmounted(() => controller?.abort())
```

还有一个容易忽略的点：`watch` 的回调如果是 async，`onCleanup` 依然要在回调同步执行的部分注册，不能 `await` 之后再注册，否则 Vue 已经错过了清理时机。上面示例里先 `const controller = new AbortController()` 再 `onCleanup` 就是这个原因。

## 和防抖配合

搜索场景一般还会加防抖，用 `lodash.debounce` 或手写：

```js
import { debounce } from 'lodash-es'

const run = debounce((val, onCleanup) => {
 const controller = new AbortController()
 onCleanup(() => controller.abort())
 fetch(`/api/search?q=${encodeURIComponent(val)}`, {
 signal: controller.signal
 }).then(r => r.json()).then(d => { result.value = d })
}, 300)

watch(keyword, (val, _, onCleanup) => {
 run(val, onCleanup)
})
```

这里 debounce 会把 `onCleanup` 一起延迟传入，Vue 仍然会在下一次侦听触发时调用上一次注册的清理函数，行为是对的。但 debounce 的 `cancel` 不会触发 `onCleanup`，组件卸载时未执行的 debounce 任务会丢失，不需要额外处理，因为它本来就没发请求。

实际项目里选择哪种方案，取决于异步操作是否支持取消。能 abort 就用 abort，不能就 token 比对。关键是别让旧结果有机会写进状态，这类 bug 在测试环境因为延迟低很少出现，上线后网络一波动就暴露出来。
 推荐查看天气：http://www.362tq.com/liangdang/10tian.html
 推荐查看天气：http://www.362tq.com/liangdang/15tian.html
 推荐查看天气：http://www.362tq.com/liangdang/40tian.html
 推荐查看天气：http://www.362tq.com/linxia/
 推荐查看天气：http://www.362tq.com/linxia/zuotian.html
 推荐查看天气：http://www.362tq.com/linxia/7tian.html
 推荐查看天气：http://www.362tq.com/linxia/10tian.html
 推荐查看天气：http://www.362tq.com/linxia/15tian.html
 推荐查看天气：http://www.362tq.com/linxia/40tian.html
 推荐查看天气：http://www.362tq.com/kangle/
 推荐查看天气：http://www.362tq.com/kangle/zuotian.html
 推荐查看天气：http://www.362tq.com/kangle/7tian.html
 推荐查看天气：http://www.362tq.com/kangle/10tian.html
 推荐查看天气：http://www.362tq.com/kangle/15tian.html
 推荐查看天气：http://www.362tq.com/kangle/40tian.html
 推荐查看天气：http://www.362tq.com/yongjing/
 推荐查看天气：http://www.362tq.com/yongjing/zuotian.html
 推荐查看天气：http://www.362tq.com/yongjing/7tian.html
 推荐查看天气：http://www.362tq.com/yongjing/10tian.html
 推荐查看天气：http://www.362tq.com/yongjing/15tian.html
 推荐查看天气：http://www.362tq.com/yongjing/40tian.html
 推荐查看天气：http://www.362tq.com/guanghe/
 推荐查看天气：http://www.362tq.com/guanghe/zuotian.html
 推荐查看天气：http://www.362tq.com/guanghe/7tian.html
 推荐查看天气：http://www.362tq.com/guanghe/10tian.html
 推荐查看天气：http://www.362tq.com/guanghe/15tian.html
 推荐查看天气：http://www.362tq.com/guanghe/40tian.html
 推荐查看天气：http://www.362tq.com/hezheng/
 推荐查看天气：http://www.362tq.com/hezheng/zuotian.html
 推荐查看天气：http://www.362tq.com/hezheng/7tian.html
 推荐查看天气：http://www.362tq.com/hezheng/10tian.html
 推荐查看天气：http://www.362tq.com/hezheng/15tian.html
 推荐查看天气：http://www.362tq.com/hezheng/40tian.html
 推荐查看天气：http://www.362tq.com/dongxiangxian/
 推荐查看天气：http://www.362tq.com/dongxiangxian/zuotian.html
 推荐查看天气：http://www.362tq.com/dongxiangxian/7tian.html
 推荐查看天气：http://www.362tq.com/dongxiangxian/10tian.html
 推荐查看天气：http://www.362tq.com/dongxiangxian/15tian.html
 推荐查看天气：http://www.362tq.com/dongxiangxian/40tian.html
 推荐查看天气：http://www.362tq.com/jishishan/
 推荐查看天气：http://www.362tq.com/jishishan/zuotian.html
 推荐查看天气：http://www.362tq.com/jishishan/7tian.html
 推荐查看天气：http://www.362tq.com/jishishan/10tian.html
 推荐查看天气：http://www.362tq.com/jishishan/15tian.html
 推荐查看天气：http://www.362tq.com/jishishan/40tian.html
 推荐查看天气：http://www.362tq.com/gannan/
 推荐查看天气：http://www.362tq.com/gannan/zuotian.html
 推荐查看天气：http://www.362tq.com/gannan/7tian.html
 推荐查看天气：http://www.362tq.com/gannan/10tian.html
 推荐查看天气：http://www.362tq.com/gannan/15tian.html
 推荐查看天气：http://www.362tq.com/gannan/40tian.html
 推荐查看天气：http://www.362tq.com/lintan/
 推荐查看天气：http://www.362tq.com/lintan/zuotian.html
 推荐查看天气：http://www.362tq.com/lintan/7tian.html
 推荐查看天气：http://www.362tq.com/lintan/10tian.html
 推荐查看天气：http://www.362tq.com/lintan/15tian.html
 推荐查看天气：http://www.362tq.com/lintan/40tian.html
 推荐查看天气：http://www.362tq.com/zhuoni/
 推荐查看天气：http://www.362tq.com/zhuoni/zuotian.html
 推荐查看天气：http://www.362tq.com/zhuoni/7tian.html
 推荐查看天气：http://www.362tq.com/zhuoni/10tian.html
 推荐查看天气：http://www.362tq.com/zhuoni/15tian.html
 推荐查看天气：http://www.362tq.com/zhuoni/40tian.html
 推荐查看天气：http://www.362tq.com/zhouqu/
 推荐查看天气：http://www.362tq.com/zhouqu/zuotian.html
 推荐查看天气：http://www.362tq.com/zhouqu/7tian.html
 推荐查看天气：http://www.362tq.com/zhouqu/10tian.html
 推荐查看天气：http://www.362tq.com/zhouqu/15tian.html
 推荐查看天气：http://www.362tq.com/zhouqu/40tian.html
 推荐查看天气：http://www.362tq.com/diebu/
 推荐查看天气：http://www.362tq.com/diebu/zuotian.html
 推荐查看天气：http://www.362tq.com/diebu/7tian.html
 推荐查看天气：http://www.362tq.com/diebu/10tian.html
 推荐查看天气：http://www.362tq.com/diebu/15tian.html
 推荐查看天气：http://www.362tq.com/diebu/40tian.html
 推荐查看天气：http://www.362tq.com/maqu/
 推荐查看天气：http://www.362tq.com/maqu/zuotian.html
 推荐查看天气：http://www.362tq.com/maqu/7tian.html
 推荐查看天气：http://www.362tq.com/maqu/10tian.html
 推荐查看天气：http://www.362tq.com/maqu/15tian.html
 推荐查看天气：http://www.362tq.com/maqu/40tian.html
 推荐查看天气：http://www.362tq.com/luqu/
 推荐查看天气：http://www.362tq.com/luqu/zuotian.html
 推荐查看天气：http://www.362tq.com/luqu/7tian.html
 推荐查看天气：http://www.362tq.com/luqu/10tian.html
 推荐查看天气：http://www.362tq.com/luqu/15tian.html
 推荐查看天气：http://www.362tq.com/luqu/40tian.html
 推荐查看天气：http://www.362tq.com/xiahe/
 推荐查看天气：http://www.362tq.com/xiahe/zuotian.html
 推荐查看天气：http://www.362tq.com/xiahe/7tian.html
 推荐查看天气：http://www.362tq.com/xiahe/10tian.html
 推荐查看天气：http://www.362tq.com/xiahe/15tian.html
 推荐查看天气：http://www.362tq.com/xiahe/40tian.html
 推荐查看天气：http://www.362tq.com/xining/
 推荐查看天气：http://www.362tq.com/xining/zuotian.html
 推荐查看天气：http://www.362tq.com/xining/7tian.html
 推荐查看天气：http://www.362tq.com/xining/10tian.html
 推荐查看天气：http://www.362tq.com/xining/15tian.html
 推荐查看天气：http://www.362tq.com/xining/40tian.html
 推荐查看天气：http://www.362tq.com/chengdong/
 推荐查看天气：http://www.362tq.com/chengdong/zuotian.html
 推荐查看天气：http://www.362tq.com/chengdong/7tian.html
 推荐查看天气：http://www.362tq.com/chengdong/10tian.html
 推荐查看天气：http://www.362tq.com/chengdong/15tian.html
 推荐查看天气：http://www.362tq.com/chengdong/40tian.html
 推荐查看天气：http://www.362tq.com/chengzhong/
 推荐查看天气：http://www.362tq.com/chengzhong/zuotian.html
 推荐查看天气：http://www.362tq.com/chengzhong/7tian.html
 推荐查看天气：http://www.362tq.com/chengzhong/10tian.html
 推荐查看天气：http://www.362tq.com/chengzhong/15tian.html
 推荐查看天气：http://www.362tq.com/chengzhong/40tian.html
 推荐查看天气：http://www.362tq.com/chengxi/
 推荐查看天气：http://www.362tq.com/chengxi/zuotian.html
 推荐查看天气：http://www.362tq.com/chengxi/7tian.html
 推荐查看天气：http://www.362tq.com/chengxi/10tian.html
 推荐查看天气：http://www.362tq.com/chengxi/15tian.html
 推荐查看天气：http://www.362tq.com/chengxi/40tian.html
 推荐查看天气：http://www.362tq.com/chengbei/
 推荐查看天气：http://www.362tq.com/chengbei/zuotian.html
 推荐查看天气：http://www.362tq.com/chengbei/7tian.html
 推荐查看天气：http://www.362tq.com/chengbei/10tian.html
 推荐查看天气：http://www.362tq.com/chengbei/15tian.html
 推荐查看天气：http://www.362tq.com/chengbei/40tian.html
 推荐查看天气：http://www.362tq.com/xndatong/
 推荐查看天气：http://www.362tq.com/xndatong/zuotian.html
 推荐查看天气：http://www.362tq.com/xndatong/7tian.html
 推荐查看天气：http://www.362tq.com/xndatong/10tian.html
 推荐查看天气：http://www.362tq.com/xndatong/15tian.html
 推荐查看天气：http://www.362tq.com/xndatong/40tian.html
 推荐查看天气：http://www.362tq.com/huangzhong/
 推荐查看天气：http://www.362tq.com/huangzhong/zuotian.html
 推荐查看天气：http://www.362tq.com/huangzhong/7tian.html
 推荐查看天气：http://www.362tq.com/huangzhong/10tian.html
 推荐查看天气：http://www.362tq.com/huangzhong/15tian.html
 推荐查看天气：http://www.362tq.com/huangzhong/40tian.html
 推荐查看天气：http://www.362tq.com/huangyuan/
 推荐查看天气：http://www.362tq.com/huangyuan/zuotian.html
 推荐查看天气：http://www.362tq.com/huangyuan/7tian.html
 推荐查看天气：http://www.362tq.com/huangyuan/10tian.html
 推荐查看天气：http://www.362tq.com/huangyuan/15tian.html
 推荐查看天气：http://www.362tq.com/huangyuan/40tian.html
 推荐查看天气：http://www.362tq.com/haidong/
 推荐查看天气：http://www.362tq.com/haidong/zuotian.html
 推荐查看天气：http://www.362tq.com/haidong/7tian.html
 推荐查看天气：http://www.362tq.com/haidong/10tian.html
 推荐查看天气：http://www.362tq.com/haidong/15tian.html
 推荐查看天气：http://www.362tq.com/haidong/40tian.html
 推荐查看天气：http://www.362tq.com/pingan/
 推荐查看天气：http://www.362tq.com/pingan/zuotian.html
 推荐查看天气：http://www.362tq.com/pingan/7tian.html
 推荐查看天气：http://www.362tq.com/pingan/10tian.html
 推荐查看天气：http://www.362tq.com/pingan/15tian.html
 推荐查看天气：http://www.362tq.com/pingan/40tian.html
 推荐查看天气：http://www.362tq.com/minhe/
 推荐查看天气：http://www.362tq.com/minhe/zuotian.html
 推荐查看天气：http://www.362tq.com/minhe/7tian.html
 推荐查看天气：http://www.362tq.com/minhe/10tian.html
 推荐查看天气：http://www.362tq.com/minhe/15tian.html
 推荐查看天气：http://www.362tq.com/minhe/40tian.html
 推荐查看天气：http://www.362tq.com/ledu/
 推荐查看天气：http://www.362tq.com/ledu/zuotian.html
 推荐查看天气：http://www.362tq.com/ledu/7tian.html
 推荐查看天气：http://www.362tq.com/ledu/10tian.html
 推荐查看天气：http://www.362tq.com/ledu/15tian.html
 推荐查看天气：http://www.362tq.com/ledu/40tian.html
 推荐查看天气：http://www.362tq.com/huzhu/
 推荐查看天气：http://www.362tq.com/huzhu/zuotian.html
 推荐查看天气：http://www.362tq.com/huzhu/7tian.html
 推荐查看天气：http://www.362tq.com/huzhu/10tian.html
 推荐查看天气：http://www.362tq.com/huzhu/15tian.html
 推荐查看天气：http://www.362tq.com/huzhu/40tian.html
 推荐查看天气：http://www.362tq.com/hualong/
 推荐查看天气：http://www.362tq.com/hualong/zuotian.html
 推荐查看天气：http://www.362tq.com/hualong/7tian.html
 推荐查看天气：http://www.362tq.com/hualong/10tian.html
 推荐查看天气：http://www.362tq.com/hualong/15tian.html
 推荐查看天气：http://www.362tq.com/hualong/40tian.html
 推荐查看天气：http://www.362tq.com/xunhua/
 推荐查看天气：http://www.362tq.com/xunhua/zuotian.html
 推荐查看天气：http://www.362tq.com/xunhua/7tian.html
 推荐查看天气：http://www.362tq.com/xunhua/10tian.html
 推荐查看天气：http://www.362tq.com/xunhua/15tian.html
 推荐查看天气：http://www.362tq.com/xunhua/40tian.html
 推荐查看天气：http://www.362tq.com/haibei/
 推荐查看天气：http://www.362tq.com/haibei/zuotian.html
 推荐查看天气：http://www.362tq.com/haibei/7tian.html
 推荐查看天气：http://www.362tq.com/haibei/10tian.html
 推荐查看天气：http://www.362tq.com/haibei/15tian.html
 推荐查看天气：http://www.362tq.com/haibei/40tian.html
 推荐查看天气：http://www.362tq.com/menyuan/
 推荐查看天气：http://www.362tq.com/menyuan/zuotian.html
 推荐查看天气：http://www.362tq.com/menyuan/7tian.html
 推荐查看天气：http://www.362tq.com/menyuan/10tian.html
 推荐查看天气：http://www.362tq.com/menyuan/15tian.html
 推荐查看天气：http://www.362tq.com/menyuan/40tian.html
 推荐查看天气：http://www.362tq.com/qilian/
 推荐查看天气：http://www.362tq.com/qilian/zuotian.html
 推荐查看天气：http://www.362tq.com/qilian/7tian.html
 推荐查看天气：http://www.362tq.com/qilian/10tian.html
 推荐查看天气：http://www.362tq.com/qilian/15tian.html

在 Vue 3 的 Composition API 里，watch 和 watchEffect 用起来比 Options API 的 watch 灵活不少，但副作用异步执行时很容易踩到竞态。比如搜索框输入关键字后发请求，用户快速输入 a、ab、abc，三个请求返回顺序不确定，最终页面可能显示 a 的结果。这个问题在前端 CRUD 后台、实时搜索、详情页切换场景里很常见。根本原因是侦听器回调本身没有“取消上一次请求”的机制，而 HTTP 请求或定时器又不会因为组件状态变化自动中止。Vue 提供了 onCleanup 回调，配合 AbortController 或一个自增 token，可以保证只有最后一次触发的异步结果被采纳。下面用真实可运行的代码梳理几种处理方式。

Vue 3 中 watch 和 watchEffect 的竞态问题与清理函数实战

在 Vue 3 的 Composition API 里，watch 和 watchEffect 用起来比 Options API 的 watch 灵活不少，但副作用异步执行时很容易踩到竞态。比如搜索框输入关键字后发请求，用户快速输入 a、ab、abc，三个请求返回顺序不确定，最终页面可能显示 a 的结果。这个问题在前端 CRUD 后台、实时搜索、详情页切换场景里很常见。根本原因是侦听器回调本身没有

前端

编程语言

开发工具

Vue3中watch与watchEffect异步副作用易产生竞态，导致旧请求覆盖新结果。通过onCleanup回调结合AbortController取消未完成请求，或使用自增token忽略过期响应，可确保仅采纳最后一次触发结果，有效解决搜索、详情页等场景的数据错乱问题。

代码解释

WebSocket

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 3 中 watch 和 watchEffect 的竞态问题与清理函数实战-腾讯云开发者社区-腾讯云

Vue 3 中 watch 和 watchEffect 的竞态问题与清理函数实战

Vue 3 中 watch 和 watchEffect 的竞态问题与清理函数实战

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐