watcheffect 中需用 oninvalidate 在下次执行前清除定时器，防止多次触发导致内存泄漏或卡顿；正确做法是闭包内声明 timer 并同步注册清理函数，轮询场景还需配合 isactive 开关控制。
在 watchEffect 中清除定时器，核心是利用其内置的清理机制（常称 onInvalidate 或 onCleanup），在**下一次副作用执行前**主动清除上一轮未完成的定时器，避免多个定时器堆积导致内存泄漏或页面卡顿。
为什么不能只靠组件卸载时清理？
组件卸载只触发一次清理，但用户频繁操作（比如快速输入、切换筛选条件）会让 watchEffect 多次重跑，每次都会新建一个定时器。若不提前清理，旧定时器仍在后台运行，轻则逻辑错乱，重则 CPU 占用飙升、页面卡死。
正确写法：闭包 + onInvalidate 精准清理
推荐把定时器变量声明在 watchEffect 回调内部，借助闭包保持引用，无需 ref，更安全简洁：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章