watcheffect 的 oncleanup 是防止竞态、内存泄漏和状态错乱的必要机制，必须在同步阶段注册，用于清理定时器、abortcontroller、事件监听等资源。
在 Vue 3 中，watchEffect 的 onCleanup 参数是清理副作用的核心机制，不是可选补充，而是防止竞态、内存泄漏和状态错乱的必要手段。它会在当前副作用被覆盖（比如响应式依赖变化触发下一次执行）或组件卸载前，自动调用你注册的清理函数。
必须同步注册 onCleanup
onCleanup 只能在 watchEffect 回调的同步执行阶段调用。一旦进入 await、setTimeout、事件回调等异步上下文，Vue 就无法绑定清理逻辑，会直接报错 “no active effect found”。
- ✅ 正确：在发起请求或启动定时器前，立刻调用
onCleanup(() => {...}) - ❌ 错误：先
await fetchData()，再调onCleanup；或把onCleanup写在setTimeout回调里
清除定时器的推荐写法
用闭包局部变量存定时器 ID，比用 ref 更安全、简洁、无污染。每次 watchEffect 执行都是独立作用域，onCleanup 能精准访问本轮次的 timer。
- 启动
setTimeout或setInterval前，先声明局部变量let timer - 紧接着调用
onCleanup(() => clearTimeout(timer))或clearInterval(timer) - 不需要判空、不需要置
null，闭包变量天然隔离，组件卸载后自动回收
例如防抖搜索：
watchEffect((onCleanup) => {
const timer = setTimeout(() => {
console.log('发起请求:', keyword.value)
}, 500)
onCleanup(() => clearTimeout(timer))
})
取消网络请求（推荐 AbortController）
用户快速输入时，旧请求必须终止，避免响应覆盖或状态错乱。
- 每次执行都新建
AbortController实例 - 把
controller.signal传给fetch或axios - 同步调用
onCleanup(() => controller.abort()) - 在
catch中过滤AbortError，只处理真实错误
其他常见清理场景
所有长期存在的资源都需要手动释放：
- 监听
window.resize→onCleanup中调removeEventListener - 初始化 ECharts / Mapbox →
onCleanup中调dispose()或destroy() - 手动创建的事件监听器、WebSocket 连接、Canvas 动画帧等，都适用同一模式
组件卸载时，onCleanup 也会触发，但为保险起见，涉及 DOM 或第三方库实例时，可配合 onBeforeUnmount 做二次检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
