在 Vue 3 的 Composition API 里，`watch` 和 `watchEffect` 都支持一个很多人见过但没深究的 `onCleanup` 回调。它最常见的出现场景是异步请求竞态：当侦听的数据频繁变化时，上一次请求还没返回，新请求已经发出，如果先发出的请求后返回，界面就会显示过期数据。除此之外，像防抖、取消订阅、清理定时器、中止 fetch 这类副作用，也会用到这个清理函数。它的本质是让侦听器在重新执行之前或组件卸载之后，有机会把上一次产生的副作用停掉。这篇文章会从竞态的成因讲起，对比 `watch` 和 `watchEffect` 的清理时机，给出 fetch 和定时器落地写法，并说明为什么它不能替代请求取消，以及和 `AbortController` 搭配时该注意的细节。

## 竞态是怎么出现的

写个搜索框的例子就很直观。监听关键词，每次变化就请求接口：

```js
import { ref, watch } from 'vue'

const keyword = ref('')
const result = ref(null)

watch(keyword, async (val) => {
 const res = await fetch(`/api/search?q=${val}`)
 result.value = await res.json()
})
```

用户在输入框里快速敲 `vue`，会依次触发请求 `v`、`vu`、`vue`。这三个请求的耗时不受控制，如果 `v` 的响应最后到达，`result` 就会被它覆盖，页面展示的是错误结果。这就是典型的竞态条件，跟防抖解决的“请求太多”并不是一回事，防抖只是降低触发频率，并不能保证响应顺序。

## onCleanup 的执行时机

`watch` 和 `watchEffect` 的副作用函数都可以接收一个 `onCleanup` 参数：

```js
watch(source, (val, oldVal, onCleanup) => {
 // 副作用
})

watchEffect((onCleanup) => {
 // 副作用
})
```

传入 `onCleanup` 的函数会在两个时机被调用：侦听器的依赖再次变化，副作用即将重新执行之前；以及侦听器被停止（组件卸载或手动 stop）时。也就是说它清理的永远是“上一次执行”留下的东西。

利用这一点，可以给请求打上一个“已过期”标记：

```js
watch(keyword, async (val, onCleanup) => {
 let expired = false
 onCleanup(() => {
 expired = true
 })

 const res = await fetch(`/api/search?q=${val}`)
 const data = await res.json()

 if (!expired) {
 result.value = data
 }
})
```

后发出的请求会让前一个请求的 `expired` 变成 `true`，过期响应回来时直接被丢弃，界面只接受最新一次的结果。这个做法不依赖请求是否真的被取消，逻辑上足够稳。

## watchEffect 里其实更常用

`watchEffect` 自动收集依赖，写异步逻辑时更容易忘记清理。比如监听路由参数变化去拉取详情页：

```js
import { watchEffect } from 'vue'

watchEffect((onCleanup) => {
 let cancelled = false
 onCleanup(() => {
 cancelled = true
 })

 fetchDetail(props.id).then((data) => {
 if (!cancelled) detail.value = data
 })
})
```

不清理的话，快速切换详情页同样会出现内容错位。`watchEffect` 的依赖收集是同步执行的，异步回调里的响应式读取不会被追踪，这点和清理函数无关，但很多人会在这里栽跟头，误以为 `onCleanup` 会跟着异步流程走。

## 真正取消请求：AbortController

标记过期只是不让旧数据写进状态，请求依然占用网络和浏览器连接。真要中止，用 `AbortController`：

```js
watch(keyword, async (val, onCleanup) => {
 const controller = new AbortController()
 onCleanup(() => controller.abort())

 try {
 const res = await fetch(`/api/search?q=${val}`, {
 signal: controller.signal
 })
 result.value = await res.json()
 } catch (err) {
 if (err.name !== 'AbortError') throw err
 }
})
```

这里有个坑：`abort()` 会让 `fetch` 抛出 `AbortError`，如果不处理，控制台会刷出一堆错误。上面用 `err.name` 判断过滤掉了正常的中止。

还有个细节，`onCleanup` 是在下一次副作用执行前触发，不是立刻在数据变化的那一刻。对 `watch` 默认的 flush 是 `'pre'`，即组件更新前，顺序基本符合预期。如果是 `flush: 'sync'`，触发会更早，要留意和 DOM 状态的配合。

## 清理函数不处理的东西

`onCleanup` 只负责执行你传给它的回调，它并不会自动帮你取消请求、清空 DOM、断开连接。像 WebSocket、`setInterval`、事件监听这些，得自己写对应的清理逻辑：

```js
watchEffect((onCleanup) => {
 const timer = setInterval(poll, 3000)
 onCleanup(() => clearInterval(timer))
})
```

如果 `onCleanup` 里做了耗时或同步阻塞的操作，它同样会拖慢侦听器的下一次执行，因为它是在副作用重新运行前同步调用的。轻量级操作没问题，重活该丢到异步或者独立的生命周期里处理。

组件卸载时，`watch` 和 `watchEffect` 默认会自动停止，`onCleanup` 也会被调用一次，所以不需要在 `onUnmounted` 里再重复清理，除非侦听器是手动创建并且没有被组件作用域关联。

 推荐查看天气：https://www.40tianqi.com/wuqiao/15tian.html
 推荐查看天气：https://www.40tianqi.com/wuqiao/40tian.html
 推荐查看天气：https://www.40tianqi.com/xianxian/
 推荐查看天气：https://www.40tianqi.com/xianxian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xianxian/7tian.html
 推荐查看天气：https://www.40tianqi.com/xianxian/10tian.html
 推荐查看天气：https://www.40tianqi.com/xianxian/15tian.html
 推荐查看天气：https://www.40tianqi.com/xianxian/40tian.html
 推荐查看天气：https://www.40tianqi.com/mengcun/
 推荐查看天气：https://www.40tianqi.com/mengcun/zuotian.html
 推荐查看天气：https://www.40tianqi.com/mengcun/7tian.html
 推荐查看天气：https://www.40tianqi.com/mengcun/10tian.html
 推荐查看天气：https://www.40tianqi.com/mengcun/15tian.html
 推荐查看天气：https://www.40tianqi.com/mengcun/40tian.html
 推荐查看天气：https://www.40tianqi.com/botou/
 推荐查看天气：https://www.40tianqi.com/botou/zuotian.html
 推荐查看天气：https://www.40tianqi.com/botou/7tian.html
 推荐查看天气：https://www.40tianqi.com/botou/10tian.html
 推荐查看天气：https://www.40tianqi.com/botou/15tian.html
 推荐查看天气：https://www.40tianqi.com/botou/40tian.html
 推荐查看天气：https://www.40tianqi.com/renqiu/
 推荐查看天气：https://www.40tianqi.com/renqiu/zuotian.html
 推荐查看天气：https://www.40tianqi.com/renqiu/7tian.html
 推荐查看天气：https://www.40tianqi.com/renqiu/10tian.html
 推荐查看天气：https://www.40tianqi.com/renqiu/15tian.html
 推荐查看天气：https://www.40tianqi.com/renqiu/40tian.html
 推荐查看天气：https://www.40tianqi.com/huanghua/
 推荐查看天气：https://www.40tianqi.com/huanghua/zuotian.html
 推荐查看天气：https://www.40tianqi.com/huanghua/7tian.html
 推荐查看天气：https://www.40tianqi.com/huanghua/10tian.html
 推荐查看天气：https://www.40tianqi.com/huanghua/15tian.html
 推荐查看天气：https://www.40tianqi.com/huanghua/40tian.html
 推荐查看天气：https://www.40tianqi.com/hejian/
 推荐查看天气：https://www.40tianqi.com/hejian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/hejian/7tian.html
 推荐查看天气：https://www.40tianqi.com/hejian/10tian.html
 推荐查看天气：https://www.40tianqi.com/hejian/15tian.html
 推荐查看天气：https://www.40tianqi.com/hejian/40tian.html
 推荐查看天气：https://www.40tianqi.com/langfang/
 推荐查看天气：https://www.40tianqi.com/langfang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/langfang/7tian.html
 推荐查看天气：https://www.40tianqi.com/langfang/10tian.html
 推荐查看天气：https://www.40tianqi.com/langfang/15tian.html
 推荐查看天气：https://www.40tianqi.com/langfang/40tian.html
 推荐查看天气：https://www.40tianqi.com/anci/
 推荐查看天气：https://www.40tianqi.com/anci/zuotian.html
 推荐查看天气：https://www.40tianqi.com/anci/7tian.html
 推荐查看天气：https://www.40tianqi.com/anci/10tian.html
 推荐查看天气：https://www.40tianqi.com/anci/15tian.html
 推荐查看天气：https://www.40tianqi.com/anci/40tian.html
 推荐查看天气：https://www.40tianqi.com/guangyang/
 推荐查看天气：https://www.40tianqi.com/guangyang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/guangyang/7tian.html
 推荐查看天气：https://www.40tianqi.com/guangyang/10tian.html
 推荐查看天气：https://www.40tianqi.com/guangyang/15tian.html
 推荐查看天气：https://www.40tianqi.com/guangyang/40tian.html
 推荐查看天气：https://www.40tianqi.com/guan/
 推荐查看天气：https://www.40tianqi.com/guan/zuotian.html
 推荐查看天气：https://www.40tianqi.com/guan/7tian.html
 推荐查看天气：https://www.40tianqi.com/guan/10tian.html
 推荐查看天气：https://www.40tianqi.com/guan/15tian.html
 推荐查看天气：https://www.40tianqi.com/guan/40tian.html
 推荐查看天气：https://www.40tianqi.com/yongqing/
 推荐查看天气：https://www.40tianqi.com/yongqing/zuotian.html
 推荐查看天气：https://www.40tianqi.com/yongqing/7tian.html
 推荐查看天气：https://www.40tianqi.com/yongqing/10tian.html
 推荐查看天气：https://www.40tianqi.com/yongqing/15tian.html
 推荐查看天气：https://www.40tianqi.com/yongqing/40tian.html
 推荐查看天气：https://www.40tianqi.com/xianghe/
 推荐查看天气：https://www.40tianqi.com/xianghe/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xianghe/7tian.html
 推荐查看天气：https://www.40tianqi.com/xianghe/10tian.html
 推荐查看天气：https://www.40tianqi.com/xianghe/15tian.html
 推荐查看天气：https://www.40tianqi.com/xianghe/40tian.html
 推荐查看天气：https://www.40tianqi.com/dacheng/
 推荐查看天气：https://www.40tianqi.com/dacheng/zuotian.html
 推荐查看天气：https://www.40tianqi.com/dacheng/7tian.html
 推荐查看天气：https://www.40tianqi.com/dacheng/10tian.html
 推荐查看天气：https://www.40tianqi.com/dacheng/15tian.html
 推荐查看天气：https://www.40tianqi.com/dacheng/40tian.html
 推荐查看天气：https://www.40tianqi.com/wenan/
 推荐查看天气：https://www.40tianqi.com/wenan/zuotian.html
 推荐查看天气：https://www.40tianqi.com/wenan/7tian.html
 推荐查看天气：https://www.40tianqi.com/wenan/10tian.html
 推荐查看天气：https://www.40tianqi.com/wenan/15tian.html
 推荐查看天气：https://www.40tianqi.com/wenan/40tian.html
 推荐查看天气：https://www.40tianqi.com/dachang/
 推荐查看天气：https://www.40tianqi.com/dachang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/dachang/7tian.html
 推荐查看天气：https://www.40tianqi.com/dachang/10tian.html
 推荐查看天气：https://www.40tianqi.com/dachang/15tian.html
 推荐查看天气：https://www.40tianqi.com/dachang/40tian.html
 推荐查看天气：https://www.40tianqi.com/bazhoushi/
 推荐查看天气：https://www.40tianqi.com/bazhoushi/zuotian.html
 推荐查看天气：https://www.40tianqi.com/bazhoushi/7tian.html
 推荐查看天气：https://www.40tianqi.com/bazhoushi/10tian.html
 推荐查看天气：https://www.40tianqi.com/bazhoushi/15tian.html
 推荐查看天气：https://www.40tianqi.com/bazhoushi/40tian.html
 推荐查看天气：https://www.40tianqi.com/sanhe/
 推荐查看天气：https://www.40tianqi.com/sanhe/zuotian.html
 推荐查看天气：https://www.40tianqi.com/sanhe/7tian.html
 推荐查看天气：https://www.40tianqi.com/sanhe/10tian.html
 推荐查看天气：https://www.40tianqi.com/sanhe/15tian.html
 推荐查看天气：https://www.40tianqi.com/sanhe/40tian.html
 推荐查看天气：https://www.40tianqi.com/hengshui/
 推荐查看天气：https://www.40tianqi.com/hengshui/zuotian.html
 推荐查看天气：https://www.40tianqi.com/hengshui/7tian.html
 推荐查看天气：https://www.40tianqi.com/hengshui/10tian.html
 推荐查看天气：https://www.40tianqi.com/hengshui/15tian.html
 推荐查看天气：https://www.40tianqi.com/hengshui/40tian.html
 推荐查看天气：https://www.40tianqi.com/taocheng/
 推荐查看天气：https://www.40tianqi.com/taocheng/zuotian.html
 推荐查看天气：https://www.40tianqi.com/taocheng/7tian.html
 推荐查看天气：https://www.40tianqi.com/taocheng/10tian.html
 推荐查看天气：https://www.40tianqi.com/taocheng/15tian.html
 推荐查看天气：https://www.40tianqi.com/taocheng/40tian.html
 推荐查看天气：https://www.40tianqi.com/zaoqiang/
 推荐查看天气：https://www.40tianqi.com/zaoqiang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/zaoqiang/7tian.html
 推荐查看天气：https://www.40tianqi.com/zaoqiang/10tian.html
 推荐查看天气：https://www.40tianqi.com/zaoqiang/15tian.html
 推荐查看天气：https://www.40tianqi.com/zaoqiang/40tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuiwuyi/
 推荐查看天气：https://www.40tianqi.com/hengshuiwuyi/zuotian.html
 推荐查看天气：https://www.40tianqi.com/hengshuiwuyi/7tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuiwuyi/10tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuiwuyi/15tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuiwuyi/40tian.html
 推荐查看天气：https://www.40tianqi.com/wuqiang/
 推荐查看天气：https://www.40tianqi.com/wuqiang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/wuqiang/7tian.html
 推荐查看天气：https://www.40tianqi.com/wuqiang/10tian.html
 推荐查看天气：https://www.40tianqi.com/wuqiang/15tian.html
 推荐查看天气：https://www.40tianqi.com/wuqiang/40tian.html
 推荐查看天气：https://www.40tianqi.com/raoyang/
 推荐查看天气：https://www.40tianqi.com/raoyang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/raoyang/7tian.html
 推荐查看天气：https://www.40tianqi.com/raoyang/10tian.html
 推荐查看天气：https://www.40tianqi.com/raoyang/15tian.html
 推荐查看天气：https://www.40tianqi.com/raoyang/40tian.html
 推荐查看天气：https://www.40tianqi.com/anping/
 推荐查看天气：https://www.40tianqi.com/anping/zuotian.html
 推荐查看天气：https://www.40tianqi.com/anping/7tian.html
 推荐查看天气：https://www.40tianqi.com/anping/10tian.html
 推荐查看天气：https://www.40tianqi.com/anping/15tian.html
 推荐查看天气：https://www.40tianqi.com/anping/40tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuigucheng/
 推荐查看天气：https://www.40tianqi.com/hengshuigucheng/zuotian.html
 推荐查看天气：https://www.40tianqi.com/hengshuigucheng/7tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuigucheng/10tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuigucheng/15tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuigucheng/40tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijingxian/
 推荐查看天气：https://www.40tianqi.com/hengshuijingxian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijingxian/7tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijingxian/10tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijingxian/15tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijingxian/40tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuifucheng/
 推荐查看天气：https://www.40tianqi.com/hengshuifucheng/zuotian.html
 推荐查看天气：https://www.40tianqi.com/hengshuifucheng/7tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuifucheng/10tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuifucheng/15tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuifucheng/40tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijizhou/
 推荐查看天气：https://www.40tianqi.com/hengshuijizhou/zuotian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijizhou/7tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijizhou/10tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijizhou/15tian.html
 推荐查看天气：https://www.40tianqi.com/hengshuijizhou/40tian.html
 推荐查看天气：https://www.40tianqi.com/shenzhou/
 推荐查看天气：https://www.40tianqi.com/shenzhou/zuotian.html
 推荐查看天气：https://www.40tianqi.com/shenzhou/7tian.html
 推荐查看天气：https://www.40tianqi.com/shenzhou/10tian.html
 推荐查看天气：https://www.40tianqi.com/shenzhou/15tian.html
 推荐查看天气：https://www.40tianqi.com/shenzhou/40tian.html
 推荐查看天气：https://www.40tianqi.com/taiyuan/
 推荐查看天气：https://www.40tianqi.com/taiyuan/zuotian.html
 推荐查看天气：https://www.40tianqi.com/taiyuan/7tian.html
 推荐查看天气：https://www.40tianqi.com/taiyuan/10tian.html
 推荐查看天气：https://www.40tianqi.com/taiyuan/15tian.html
 推荐查看天气：https://www.40tianqi.com/taiyuan/40tian.html
 推荐查看天气：https://www.40tianqi.com/xiaodian/
 推荐查看天气：https://www.40tianqi.com/xiaodian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xiaodian/7tian.html
 推荐查看天气：https://www.40tianqi.com/xiaodian/10tian.html
 推荐查看天气：https://www.40tianqi.com/xiaodian/15tian.html
 推荐查看天气：https://www.40tianqi.com/xiaodian/40tian.html
 推荐查看天气：https://www.40tianqi.com/yingze/
 推荐查看天气：https://www.40tianqi.com/yingze/zuotian.html
 推荐查看天气：https://www.40tianqi.com/yingze/7tian.html
 推荐查看天气：https://www.40tianqi.com/yingze/10tian.html
 推荐查看天气：https://www.40tianqi.com/yingze/15tian.html
 推荐查看天气：https://www.40tianqi.com/yingze/40tian.html
 推荐查看天气：https://www.40tianqi.com/xinghualing/
 推荐查看天气：https://www.40tianqi.com/xinghualing/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xinghualing/7tian.html
 推荐查看天气：https://www.40tianqi.com/xinghualing/10tian.html
 推荐查看天气：https://www.40tianqi.com/xinghualing/15tian.html
 推荐查看天气：https://www.40tianqi.com/xinghualing/40tian.html

在 Vue 3 的 Composition API 里，watch 和 watchEffect 都支持一个很多人见过但没深究的 onCleanup 回调。它最常见的出现场景是异步请求竞态：当侦听的数据频繁变化时，上一次请求还没返回，新请求已经发出，如果先发出的请求后返回，界面就会显示过期数据。除此之外，像防抖、取消订阅、清理定时器、中止 fetch 这类副作用，也会用到这个清理函数。它的本质是让侦听器在重新执行之前或组件卸载之后，有机会把上一次产生的副作用停掉。这篇文章会从竞态的成因讲起，对比 watch 和 watchEffect 的清理时机，给出 fetch 和定时器落地写法，并说明为什么它不能替代请求取消，以及和 AbortController 搭配时该注意的细节。

Vue 3 中 watch 和 watchEffect 的清理函数到底解决什么问题？

在 Vue 3 的 Composition API 里，watch 和 watchEffect 都支持一个很多人见过但没深究的 onCleanup 回调。它最常见的出现场景是异步请求竞态：当侦听的数据频繁变化时，上一次请求还没返回，新请求已经发出，如果先发出的请求后返回，界面就会显示过期数据。除此之外，像防抖、取消订阅、清理定时器、中止 fetch 这类副作用，也会用到这个清理函数。它的本质是让侦

前端

编程语言

深入解析Vue3 Composition API中watch与watchEffect的onCleanup回调机制，解决异步请求竞态问题。通过标记过期响应、AbortController中止请求、清理定时器等实战案例，展示清理函数的执行时机与正确用法，并说明与请求取消的本质区别。

代码解释

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 的清理函数到底解决什么问题？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐