watcheffect 中 oncleanup 是专为防竞态和内存泄漏设计的清理机制，它在副作用重执行或监听器停止时自动调用，用于清理异步请求、定时器、事件监听等外部资源。
在 watchEffect 中处理清理函数，核心是利用它内置的 onCleanup（也叫 onInvalidate）参数——它不是可选技巧，而是专为解决竞态和内存泄漏设计的正式机制。
onCleanup 是什么，什么时候执行？
onCleanup 是 watchEffect 副作用函数的唯一参数，类型为 (cleanupFn: () => void) => void。它会在两种情况下被调用：
- 当前副作用函数即将被重新执行（比如依赖值变了，要跑下一轮）
- 组件卸载、
watchEffect被手动stop()或作用域销毁时
也就是说，只要旧的副作用还没完成，新轮次要开始，或监听器要退出，onCleanup 就会先帮你把上一轮没做完的事“收尾”。
常见需要清理的场景及写法
真正容易泄漏的，不是响应式依赖本身（Vue 会自动停），而是副作用里产生的外部资源：
-
异步请求：用
AbortController绑定 signal，onCleanup中调abort() -
定时器：
setInterval或setTimeout的句柄，在onCleanup里clearInterval或clearTimeout -
事件监听：对
window、document或自定义元素添加的监听器，必须配对removeEventListener -
第三方库订阅：如
mitt的on、WebSocket 的onmessage等，对应取消方法要在onCleanup中调用
示例（定时器）：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
watchEffect((onCleanup) => {<br> const timer = setInterval(() => { console.log('tick') }, 1000)<br> onCleanup(() => clearInterval(timer))<br>})
示例（请求）：
watchEffect((onCleanup) => {<br> const controller = new AbortController()<br> onCleanup(() => controller.abort())<br> fetch('/api/data', { signal: controller.signal })<br>})
stop() 和 onCleanup 不是替代关系，而是分工协作
stop() 是手动终止整个监听器，适合明确不再需要监听的场景（比如表单提交后禁用搜索）；onCleanup 则是自动保障“每次重跑前清理上一次”，防止竞态和残留资源。
- 只调
stop()不写onCleanup→ 上一轮异步可能还在跑，结果写入已销毁组件 - 只写
onCleanup不调stop()→ 组件卸载时它仍会被触发，但这是预期行为，没问题 - 两者都用 → 最稳妥：运行中防竞态，退出时保干净
注意几个易错点
实际编码中这几个细节最容易导致清理失效：
-
onCleanup必须在副作用函数体内调用，不能放在if分支外层或异步回调里 - 清理函数里不要访问已销毁组件的
ref或reactive，避免报错；如有必要，加空值判断 - 如果副作用里用了
flush: 'post'，onCleanup仍按原逻辑执行（即重跑前），不受 DOM 更新时机影响 -
onCleanup不支持异步操作（比如await api.logout()），如需异步清理，请改用onBeforeUnmount
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
