在 watcheffect 中应监听 isactive、intervalms 等响应式状态而非定时器 id，每次执行前清除旧 timer 并按条件新建，配合 oninvalidate 实现自动清理，提升健壮性与可维护性。
在 watchEffect 中管理定时器，核心不是“监听定时器 ID”，而是用响应式状态驱动它的生命周期——创建、运行、暂停、销毁都由 ref 或 reactive 的值自动触发，配合 onInvalidate 实现安全清理。
监听控制状态，而非定时器本身
定时器 ID（如 setInterval 返回的数字）是普通值，不具备响应性，不能直接作为 watchEffect 的依赖。真正该监听的是业务语义明确的响应式变量：
-
isActive：是否应启用定时任务（
ref(true)） -
intervalMs：当前轮询间隔（
ref(5000)） -
shouldRun：更细粒度条件，比如
!loading.value && data.value
这些变量一变化，watchEffect 就会重新执行，自然触发新逻辑——包括停旧启新。
每次执行前清除旧定时器
避免多个定时器同时运行导致卡顿或内存泄漏，必须确保同一时刻只有一个实例。推荐写法是用闭包局部变量保存 timer 引用：
- 在
watchEffect回调开头声明let timer = null - 进入回调时立即检查并清除：
if (timer) clearInterval(timer) - 再根据
isActive.value && shouldRun.value决定是否新建：timer = setInterval(...)
这种写法比把 timer 存进 ref 更轻量、无副作用，也避免了 ref 被意外重置的风险。
用 onInvalidate 做双重保险
onInvalidate 是 watchEffect 提供的清理钩子，会在副作用**下次执行前**或**组件卸载时**自动调用。它必须和 timer 变量在同一作用域内才能访问到：
- 在回调中定义
let timer后，立刻注册：onInvalidate(() => { clearInterval(timer) }) - 即使组件突然销毁、或依赖突变中断流程，这个清理也会执行
- 这是防止内存泄漏的关键防线，不可省略
结合场景增强健壮性
纯轮询容易浪费资源，可在 watchEffect 内部加入轻量判断，让定时器“有感知”：
- 页面不可见时跳过：
if (document.hidden) return - 请求中或数据未就绪时暂不启动：
if (loading.value || !data.value) return - 高频变动时改用
setTimeout+ 递归，实现节流效果 - 若监听整个配置对象，加
flush: 'post'或deep: true确保深层变化也被捕获
这类逻辑天然适合封装成组合式函数（如 usePolling），对外只暴露 start()、stop() 和控制 ref，内部细节完全隐藏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
