在 Vue 3 组件里用 `watch` 或 `watchEffect` 监听数据时，大部分场景都不需要手动停止，因为组件卸载后这些侦听器会自动失效。但一旦把侦听器创建在组件之外的模块作用域、异步回调或者第三方库的事件处理器里，自动停止就不再生效，反复注册会造成内存泄漏和重复执行。很多人只在组件 `setup` 中写过侦听器，对 `onCleanup`、`effectScope`、`getCurrentScope` 这些机制没有直观感受，等到在路由守卫或 WebSocket 回调里用 watch 时就容易写出难以排查的 bug。这篇文章从 Vue 3 的响应式内部实现出发，梳理侦听器与组件实例、effect scope 之间的关系，并给出几种在非组件环境下安全使用 watch 的写法。

## 自动停止的前提是存在当前的 effect scope

Vue 3 的 `watch` 和 `watchEffect` 内部依赖 `ReactiveEffect`，而 effect 的收集和销毁由 `effectScope` 管理。在组件渲染过程中，Vue 会为每个组件实例创建一个 scope，`setup()` 中同步创建的侦听器会被这个 scope 收集。当组件卸载时，Vue 调用 `scope.stop()`，scope 内所有 effect 的 `stop` 方法依次执行，侦听器随之失效。

关键点在于“同步创建”。下面这段代码在组件内是正常的：

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

export default {
 setup() {
 const count = ref(0)
 watchEffect(() => {
 console.log(count.value)
 })
 return { count }
 }
}
```

`watchEffect` 执行时，`getCurrentScope()` 返回组件实例的 scope，effect 被登记进去。组件卸载后 log 不会再触发。

但把同样的代码放进 `setTimeout`，结果就不同：

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

export default {
 setup() {
 const count = ref(0)
 setTimeout(() => {
 watchEffect(() => {
 console.log(count.value)
 })
 }, 1000)
 return { count }
 }
}
```

因为 `setTimeout` 的回调执行时已经脱离了组件 setup 的同步调用栈，`getCurrentScope()` 返回 `undefined`，effect 不再被组件 scope 接管。组件卸载后这个侦听器依然存活，闭包里的 `count` 和组件实例都无法被回收。

这个问题在开发环境通常不会立刻暴露，只有在频繁挂载卸载的弹窗、路由切换、列表项上才逐渐显现。

## onCleanup 和 effectScope 是两条不同的路

`watch` 和 `watchEffect` 回调里都能注册清理函数：

```js
watchEffect((onCleanup) => {
 const timer = setInterval(() => {
 fetchLatest()
 }, 5000)

 onCleanup(() => {
 clearInterval(timer)
 })
})
```

`onCleanup` 解决的是“上一次副作用还没执行完”的问题，每次侦听器重新运行前会先执行上一次注册的 clean 函数。它并不会让侦听器本身停止，侦听器停止仍然要靠 scope 或者手动调用返回的 stop 函数。

`effectScope` 则是 Vue 暴露出来的、用来手动管理一批 effect 生命周期的 API：

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

const scope = effectScope()
const count = ref(0)

scope.run(() => {
 watch(count, (val) => {
 console.log('count changed:', val)
 })
})

count.value = 1 // 会打印
scope.stop()
count.value = 2 // 不会打印
```

在组件之外的模块里需要长期维护一组侦听器时，用 `effectScope` 比在每个 watch 上保存 stop 函数更省心。Vue 官方的一些库，比如 Pinia，内部就是用 effectScope 来管理 store 的 effect。

## 在组合式函数里正确处理非组件场景

写组合式 API 的人经常遇到这种需求：把 watch 封装成 composable，然后希望在组件内使用就随组件卸载，在组件外用就能手动控制。做法是判断当前有没有活跃的 scope：

```js
import { effectScope, getCurrentScope, watch, onScopeDispose } from 'vue'

export function useSharedWatcher(source, cb) {
 const scope = effectScope()
 let stop = null

 scope.run(() => {
 stop = watch(source, cb)
 })

 const dispose = () => scope.stop()

 if (getCurrentScope()) {
 onScopeDispose(dispose)
 }

 return dispose
}
```

在组件内调用时，`onScopeDispose` 会绑到组件所在的 scope，组件卸载自动调用 `dispose`。在组件外调用时，返回的 `dispose` 交给调用方自己维护。这种模式比直接返回 `watch` 的 stop 函数更稳，因为 scope 能一并处理内部可能创建的其他 effect。

## 路由守卫里的常见误用

在 `router.beforeEach` 里用 watch 是一个高频出错点：

```js
router.beforeEach((to, from, next) => {
 const user = useUserStore()
 watch(() => user.token, (token) => {
 if (!token) next('/login')
 })
 next()
})
```

每进入一次路由就创建一个新侦听器，旧侦听器不会自动消失，导航次数一多就会堆叠。守卫里本身不应该做这种持续性监听，如果确实需要，应当在守卫外部预先创建一次，或者用 `effectScope` 包起来并在合适时机 stop。

## 调试侦听器是否泄漏

开发时想确认侦听器有没有被正确停止，可以在 `watchEffect` 里加一行日志，看组件卸载后是否还会执行。更彻底的做法是用 `onScopeDispose` 打印：

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

if (import.meta.env.DEV) {
 onScopeDispose(() => {
 console.log('scope disposed')
 })
}
```

如果组件卸载后没有这条日志，说明当前代码根本没有处在组件的 scope 里，watch 的自动停止自然也不会生效。这个判断比靠记忆推断可靠得多。

 推荐查看天气：https://www.40tianqi.com/xingtaiweixian/
 推荐查看天气：https://www.40tianqi.com/xingtaiweixian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiweixian/7tian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiweixian/10tian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiweixian/15tian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiweixian/40tian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiqinghe/
 推荐查看天气：https://www.40tianqi.com/xingtaiqinghe/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiqinghe/7tian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiqinghe/10tian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiqinghe/15tian.html
 推荐查看天气：https://www.40tianqi.com/xingtaiqinghe/40tian.html
 推荐查看天气：https://www.40tianqi.com/xingtailinxi/
 推荐查看天气：https://www.40tianqi.com/xingtailinxi/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xingtailinxi/7tian.html
 推荐查看天气：https://www.40tianqi.com/xingtailinxi/10tian.html
 推荐查看天气：https://www.40tianqi.com/xingtailinxi/15tian.html
 推荐查看天气：https://www.40tianqi.com/xingtailinxi/40tian.html
 推荐查看天气：https://www.40tianqi.com/nangong/
 推荐查看天气：https://www.40tianqi.com/nangong/zuotian.html
 推荐查看天气：https://www.40tianqi.com/nangong/7tian.html
 推荐查看天气：https://www.40tianqi.com/nangong/10tian.html
 推荐查看天气：https://www.40tianqi.com/nangong/15tian.html
 推荐查看天气：https://www.40tianqi.com/nangong/40tian.html
 推荐查看天气：https://www.40tianqi.com/shahe/
 推荐查看天气：https://www.40tianqi.com/shahe/zuotian.html
 推荐查看天气：https://www.40tianqi.com/shahe/7tian.html
 推荐查看天气：https://www.40tianqi.com/shahe/10tian.html
 推荐查看天气：https://www.40tianqi.com/shahe/15tian.html
 推荐查看天气：https://www.40tianqi.com/shahe/40tian.html
 推荐查看天气：https://www.40tianqi.com/baoding/
 推荐查看天气：https://www.40tianqi.com/baoding/zuotian.html
 推荐查看天气：https://www.40tianqi.com/baoding/7tian.html
 推荐查看天气：https://www.40tianqi.com/baoding/10tian.html
 推荐查看天气：https://www.40tianqi.com/baoding/15tian.html
 推荐查看天气：https://www.40tianqi.com/baoding/40tian.html
 推荐查看天气：https://www.40tianqi.com/nanshi/
 推荐查看天气：https://www.40tianqi.com/nanshi/zuotian.html
 推荐查看天气：https://www.40tianqi.com/nanshi/7tian.html
 推荐查看天气：https://www.40tianqi.com/nanshi/10tian.html
 推荐查看天气：https://www.40tianqi.com/nanshi/15tian.html
 推荐查看天气：https://www.40tianqi.com/nanshi/40tian.html
 推荐查看天气：https://www.40tianqi.com/mancheng/
 推荐查看天气：https://www.40tianqi.com/mancheng/zuotian.html
 推荐查看天气：https://www.40tianqi.com/mancheng/7tian.html
 推荐查看天气：https://www.40tianqi.com/mancheng/10tian.html
 推荐查看天气：https://www.40tianqi.com/mancheng/15tian.html
 推荐查看天气：https://www.40tianqi.com/mancheng/40tian.html
 推荐查看天气：https://www.40tianqi.com/baodingqingyuan/
 推荐查看天气：https://www.40tianqi.com/baodingqingyuan/zuotian.html
 推荐查看天气：https://www.40tianqi.com/baodingqingyuan/7tian.html
 推荐查看天气：https://www.40tianqi.com/baodingqingyuan/10tian.html
 推荐查看天气：https://www.40tianqi.com/baodingqingyuan/15tian.html
 推荐查看天气：https://www.40tianqi.com/baodingqingyuan/40tian.html
 推荐查看天气：https://www.40tianqi.com/laishui/
 推荐查看天气：https://www.40tianqi.com/laishui/zuotian.html
 推荐查看天气：https://www.40tianqi.com/laishui/7tian.html
 推荐查看天气：https://www.40tianqi.com/laishui/10tian.html
 推荐查看天气：https://www.40tianqi.com/laishui/15tian.html
 推荐查看天气：https://www.40tianqi.com/laishui/40tian.html
 推荐查看天气：https://www.40tianqi.com/baodingfuping/
 推荐查看天气：https://www.40tianqi.com/baodingfuping/zuotian.html
 推荐查看天气：https://www.40tianqi.com/baodingfuping/7tian.html
 推荐查看天气：https://www.40tianqi.com/baodingfuping/10tian.html
 推荐查看天气：https://www.40tianqi.com/baodingfuping/15tian.html
 推荐查看天气：https://www.40tianqi.com/baodingfuping/40tian.html
 推荐查看天气：https://www.40tianqi.com/xushui/
 推荐查看天气：https://www.40tianqi.com/xushui/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xushui/7tian.html
 推荐查看天气：https://www.40tianqi.com/xushui/10tian.html
 推荐查看天气：https://www.40tianqi.com/xushui/15tian.html
 推荐查看天气：https://www.40tianqi.com/xushui/40tian.html
 推荐查看天气：https://www.40tianqi.com/dingxing/
 推荐查看天气：https://www.40tianqi.com/dingxing/zuotian.html
 推荐查看天气：https://www.40tianqi.com/dingxing/7tian.html
 推荐查看天气：https://www.40tianqi.com/dingxing/10tian.html
 推荐查看天气：https://www.40tianqi.com/dingxing/15tian.html
 推荐查看天气：https://www.40tianqi.com/dingxing/40tian.html
 推荐查看天气：https://www.40tianqi.com/tangxian/
 推荐查看天气：https://www.40tianqi.com/tangxian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/tangxian/7tian.html
 推荐查看天气：https://www.40tianqi.com/tangxian/10tian.html
 推荐查看天气：https://www.40tianqi.com/tangxian/15tian.html
 推荐查看天气：https://www.40tianqi.com/tangxian/40tian.html
 推荐查看天气：https://www.40tianqi.com/gaoyang/
 推荐查看天气：https://www.40tianqi.com/gaoyang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/gaoyang/7tian.html
 推荐查看天气：https://www.40tianqi.com/gaoyang/10tian.html
 推荐查看天气：https://www.40tianqi.com/gaoyang/15tian.html
 推荐查看天气：https://www.40tianqi.com/gaoyang/40tian.html
 推荐查看天气：https://www.40tianqi.com/baodingrongcheng/
 推荐查看天气：https://www.40tianqi.com/baodingrongcheng/zuotian.html
 推荐查看天气：https://www.40tianqi.com/baodingrongcheng/7tian.html
 推荐查看天气：https://www.40tianqi.com/baodingrongcheng/10tian.html
 推荐查看天气：https://www.40tianqi.com/baodingrongcheng/15tian.html
 推荐查看天气：https://www.40tianqi.com/baodingrongcheng/40tian.html
 推荐查看天气：https://www.40tianqi.com/laiyuan/
 推荐查看天气：https://www.40tianqi.com/laiyuan/zuotian.html
 推荐查看天气：https://www.40tianqi.com/laiyuan/7tian.html
 推荐查看天气：https://www.40tianqi.com/laiyuan/10tian.html
 推荐查看天气：https://www.40tianqi.com/laiyuan/15tian.html
 推荐查看天气：https://www.40tianqi.com/laiyuan/40tian.html
 推荐查看天气：https://www.40tianqi.com/wangdu/
 推荐查看天气：https://www.40tianqi.com/wangdu/zuotian.html
 推荐查看天气：https://www.40tianqi.com/wangdu/7tian.html
 推荐查看天气：https://www.40tianqi.com/wangdu/10tian.html
 推荐查看天气：https://www.40tianqi.com/wangdu/15tian.html
 推荐查看天气：https://www.40tianqi.com/wangdu/40tian.html
 推荐查看天气：https://www.40tianqi.com/anxin/
 推荐查看天气：https://www.40tianqi.com/anxin/zuotian.html
 推荐查看天气：https://www.40tianqi.com/anxin/7tian.html
 推荐查看天气：https://www.40tianqi.com/anxin/10tian.html
 推荐查看天气：https://www.40tianqi.com/anxin/15tian.html
 推荐查看天气：https://www.40tianqi.com/anxin/40tian.html
 推荐查看天气：https://www.40tianqi.com/baodingyixian/
 推荐查看天气：https://www.40tianqi.com/baodingyixian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/baodingyixian/7tian.html
 推荐查看天气：https://www.40tianqi.com/baodingyixian/10tian.html
 推荐查看天气：https://www.40tianqi.com/baodingyixian/15tian.html
 推荐查看天气：https://www.40tianqi.com/baodingyixian/40tian.html
 推荐查看天气：https://www.40tianqi.com/quyang/
 推荐查看天气：https://www.40tianqi.com/quyang/zuotian.html
 推荐查看天气：https://www.40tianqi.com/quyang/7tian.html
 推荐查看天气：https://www.40tianqi.com/quyang/10tian.html
 推荐查看天气：https://www.40tianqi.com/quyang/15tian.html
 推荐查看天气：https://www.40tianqi.com/quyang/40tian.html
 推荐查看天气：https://www.40tianqi.com/baodinglixian/
 推荐查看天气：https://www.40tianqi.com/baodinglixian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/baodinglixian/7tian.html
 推荐查看天气：https://www.40tianqi.com/baodinglixian/10tian.html
 推荐查看天气：https://www.40tianqi.com/baodinglixian/15tian.html
 推荐查看天气：https://www.40tianqi.com/baodinglixian/40tian.html
 推荐查看天气：https://www.40tianqi.com/shunping/
 推荐查看天气：https://www.40tianqi.com/shunping/zuotian.html
 推荐查看天气：https://www.40tianqi.com/shunping/7tian.html
 推荐查看天气：https://www.40tianqi.com/shunping/10tian.html
 推荐查看天气：https://www.40tianqi.com/shunping/15tian.html
 推荐查看天气：https://www.40tianqi.com/shunping/40tian.html
 推荐查看天气：https://www.40tianqi.com/boye/
 推荐查看天气：https://www.40tianqi.com/boye/zuotian.html
 推荐查看天气：https://www.40tianqi.com/boye/7tian.html
 推荐查看天气：https://www.40tianqi.com/boye/10tian.html
 推荐查看天气：https://www.40tianqi.com/boye/15tian.html
 推荐查看天气：https://www.40tianqi.com/boye/40tian.html
 推荐查看天气：https://www.40tianqi.com/xiongxian/
 推荐查看天气：https://www.40tianqi.com/xiongxian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/xiongxian/7tian.html
 推荐查看天气：https://www.40tianqi.com/xiongxian/10tian.html
 推荐查看天气：https://www.40tianqi.com/xiongxian/15tian.html
 推荐查看天气：https://www.40tianqi.com/xiongxian/40tian.html
 推荐查看天气：https://www.40tianqi.com/zhuozhou/
 推荐查看天气：https://www.40tianqi.com/zhuozhou/zuotian.html
 推荐查看天气：https://www.40tianqi.com/zhuozhou/7tian.html
 推荐查看天气：https://www.40tianqi.com/zhuozhou/10tian.html
 推荐查看天气：https://www.40tianqi.com/zhuozhou/15tian.html
 推荐查看天气：https://www.40tianqi.com/zhuozhou/40tian.html
 推荐查看天气：https://www.40tianqi.com/dingzhou/
 推荐查看天气：https://www.40tianqi.com/dingzhou/zuotian.html
 推荐查看天气：https://www.40tianqi.com/dingzhou/7tian.html
 推荐查看天气：https://www.40tianqi.com/dingzhou/10tian.html
 推荐查看天气：https://www.40tianqi.com/dingzhou/15tian.html
 推荐查看天气：https://www.40tianqi.com/dingzhou/40tian.html
 推荐查看天气：https://www.40tianqi.com/anguo/
 推荐查看天气：https://www.40tianqi.com/anguo/zuotian.html
 推荐查看天气：https://www.40tianqi.com/anguo/7tian.html
 推荐查看天气：https://www.40tianqi.com/anguo/10tian.html
 推荐查看天气：https://www.40tianqi.com/anguo/15tian.html
 推荐查看天气：https://www.40tianqi.com/anguo/40tian.html
 推荐查看天气：https://www.40tianqi.com/gaobeidian/
 推荐查看天气：https://www.40tianqi.com/gaobeidian/zuotian.html
 推荐查看天气：https://www.40tianqi.com/gaobeidian/7tian.html
 推荐查看天气：https://www.40tianqi.com/gaobeidian/10tian.html
 推荐查看天气：https://www.40tianqi.com/gaobeidian/15tian.html
 推荐查看天气：https://www.40tianqi.com/gaobeidian/40tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakou/
 推荐查看天气：https://www.40tianqi.com/zhangjiakou/zuotian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakou/7tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakou/10tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakou/15tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakou/40tian.html
 推荐查看天气：https://www.40tianqi.com/qiaodong/
 推荐查看天气：https://www.40tianqi.com/qiaodong/zuotian.html
 推荐查看天气：https://www.40tianqi.com/qiaodong/7tian.html
 推荐查看天气：https://www.40tianqi.com/qiaodong/10tian.html
 推荐查看天气：https://www.40tianqi.com/qiaodong/15tian.html
 推荐查看天气：https://www.40tianqi.com/qiaodong/40tian.html
 推荐查看天气：https://www.40tianqi.com/qiaoxi/
 推荐查看天气：https://www.40tianqi.com/qiaoxi/zuotian.html
 推荐查看天气：https://www.40tianqi.com/qiaoxi/7tian.html
 推荐查看天气：https://www.40tianqi.com/qiaoxi/10tian.html
 推荐查看天气：https://www.40tianqi.com/qiaoxi/15tian.html
 推荐查看天气：https://www.40tianqi.com/qiaoxi/40tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakouxuanhua/
 推荐查看天气：https://www.40tianqi.com/zhangjiakouxuanhua/zuotian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakouxuanhua/7tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakouxuanhua/10tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakouxuanhua/15tian.html
 推荐查看天气：https://www.40tianqi.com/zhangjiakouxuanhua/40tian.html
 推荐查看天气：https://www.40tianqi.com/xiahuayuan/
 推荐查看天气：https://www.40tianqi.com/xiahuayuan/zuotian.html

在 Vue 3 组件里用 watch 或 watchEffect 监听数据时，大部分场景都不需要手动停止，因为组件卸载后这些侦听器会自动失效。但一旦把侦听器创建在组件之外的模块作用域、异步回调或者第三方库的事件处理器里，自动停止就不再生效，反复注册会造成内存泄漏和重复执行。很多人只在组件 setup 中写过侦听器，对 onCleanup、effectScope、getCurrentScope 这些机制没有直观感受，等到在路由守卫或 WebSocket 回调里用 watch 时就容易写出难以排查的 bug。这篇文章从 Vue 3 的响应式内部实现出发，梳理侦听器与组件实例、effect scope 之间的关系，并给出几种在非组件环境下安全使用 watch 的写法。

Vue 3 中 watch 和 watchEffect 的自动停止机制到底怎么工作

在 Vue 3 组件里用 watch 或 watchEffect 监听数据时，大部分场景都不需要手动停止，因为组件卸载后这些侦听器会自动失效。但一旦把侦听器创建在组件之外的模块作用域、异步回调或者第三方库的事件处理器里，自动停止就不再生效，反复注册会造成内存泄漏和重复执行。很多人只在组件 setup 中写过侦听器，对 onCleanup、effectScope、getCurrentScope 这些

编程语言

Vue3中watch和watchEffect在组件外使用会因脱离effectScope导致内存泄漏，本文深入解析自动停止失效原理，提供effectScope、onScopeDispose及组合式函数封装等解决方案，并指出路由守卫等场景的常见误用与调试方法。

代码解释

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 的自动停止机制到底怎么工作

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐