Vue 响应式侦听如何在 watchEffect 中处理清理函数避免内存泄漏

watchEffect 中 onCleanup 是专为防竞态和内存泄漏设计的清理机制，它在副作用重执行或监听器停止时自动调用，用于清理异步请求、定时器、事件监听等外部资源。

在 watchEffect 中处理清理函数，核心是利用它内置的 onCleanup（也叫 onInvalidate）参数——它不是可选技巧，而是专为解决竞态和内存泄漏设计的正式机制。

onCleanup 是什么，什么时候执行？

onCleanup 是 watchEffect 副作用函数的唯一参数，类型为 (cleanupFn: () => void) => void。它会在两种情况下被调用：

1. 当前副作用函数即将被重新执行（比如依赖值变了，要跑下一轮）
2. 组件卸载、watchEffect 被手动 stop() 或作用域销毁时

也就是说，只要旧的副作用还没完成，新轮次要开始，或监听器要退出，onCleanup 就会先帮你把上一轮没做完的事“收尾”。

常见需要清理的场景及写法

真正容易泄漏的，不是响应式依赖本身（Vue 会自动停），而是副作用里产生的外部资源：

1. 异步请求：用 AbortController 绑定 signal，onCleanup 中调 abort()
2. 定时器：setInterval 或 setTimeout 的句柄，在 onCleanup 里 clearInterval 或 clearTimeout
3. 事件监听：对 window、document 或自定义元素添加的监听器，必须配对 removeEventListener
4. 第三方库订阅：如 mitt 的 on、WebSocket 的 onmessage 等，对应取消方法要在 onCleanup 中调用

示例（定时器）：

watchEffect((onCleanup) => {

const timer = setInterval(() => { console.log('tick') }, 1000)

onCleanup(() => clearInterval(timer))

})

示例（请求）：

watchEffect((onCleanup) => {

const controller = new AbortController()

onCleanup(() => controller.abort())

fetch('/api/data', { signal: controller.signal })

})

stop() 和 onCleanup 不是替代关系，而是分工协作

stop() 是手动终止整个监听器，适合明确不再需要监听的场景（比如表单提交后禁用搜索）；onCleanup 则是自动保障“每次重跑前清理上一次”，防止竞态和残留资源。

1. 只调 stop() 不写 onCleanup → 上一轮异步可能还在跑，结果写入已销毁组件
2. 只写 onCleanup 不调 stop() → 组件卸载时它仍会被触发，但这是预期行为，没问题
3. 两者都用 → 最稳妥：运行中防竞态，退出时保干净

注意几个易错点

实际编码中这几个细节最容易导致清理失效：

1. onCleanup 必须在副作用函数体内调用，不能放在 if 分支外层或异步回调里
2. 清理函数里不要访问已销毁组件的 ref 或 reactive，避免报错；如有必要，加空值判断
3. 如果副作用里用了 flush: 'post'，onCleanup 仍按原逻辑执行（即重跑前），不受 DOM 更新时机影响
4. onCleanup 不支持异步操作（比如 await api.logout()），如需异步清理，请改用 onBeforeUnmount