不能直接用 watchEffect 监听定时器 ID，而应监听 isActive、intervalMs 等响应式状态，每次触发前清除旧定时器，满足条件时新建，并在清理函数中再次清除，避免堆积导致卡死。
不能直接用 watchEffect 监听定时器本身（比如 setInterval 返回的 ID），因为定时器 ID 是个普通数字，不具有响应性。真正要监听的是“定时器是否在运行”、“触发条件是否变化”或“依赖状态是否更新”，再配合手动控制定时器的启停——这才是防止页面卡死、实现高级副作用管理的核心逻辑。
监听响应式状态来控制定时器生命周期
把定时器的开启/关闭、间隔时间、执行条件等封装成响应式变量，让 watchEffect 自动追踪它们的变化，并统一管理定时器的清理与重建。
- 用
ref或reactive定义isActive、intervalMs、shouldRun等控制字段 -
watchEffect内部先clearInterval（确保旧定时器已停），再根据最新状态决定是否setInterval - 务必在
watchEffect清理函数中再次清除定时器，避免组件卸载后仍运行
避免无限创建定时器：每次只保留一个有效实例
常见卡死原因：响应式依赖频繁变动，导致 watchEffect 反复触发，不断新建 setInterval 却未清除前一个，最终堆积大量定时器任务。
- 声明一个
let timer: NodeJS.Timeout | null = null（非响应式，仅作引用容器） - 每次进入
watchEffect时，先if (timer) clearInterval(timer) - 仅当
isActive && shouldRun为真时，才赋值新定时器：timer = setInterval(...) - 在
watchEffect的清理函数里再次执行clearInterval(timer)并置空
用 watchEffect 替代 watch + 手动清理的冗余写法
传统 watch 需显式写 onInvalidate 或 onBeforeUnmount 清理；而 watchEffect 天然支持自动清理，更适合管理有状态副作用的定时器。
- 清理函数会在下一次副作用执行前、或组件卸载时自动调用，无需额外生命周期钩子
- 适合封装成组合式函数（如
useInterval），内部隐藏 timer 引用和清理逻辑 - 示例关键片段：
watchEffect((onInvalidate) => {
if (!isActive.value) return;
timer = setInterval(() => {...}, intervalMs.value);
onInvalidate(() => {
if (timer) clearInterval(timer);
timer = null;
});
});
结合业务场景做防抖/节流或暂停策略
单纯轮询容易加重负担。可在 watchEffect 中加入智能判断，让定时器更“懂业务”。
- 页面不可见时（
document.hidden）暂停定时器，切回前台再恢复 - 请求中或数据未就绪时跳过本次执行（
if (loading.value || !data.value) return） - 用
setTimeout模拟节流：每次执行后重设，替代高频setInterval - 对关键状态加
deep: true或immediate: false控制触发时机
