在 Vue3 中，KeepAlive 缓存组件不会触发 unmounted，定时器需在 onDeactivated 中清除并置空 ref，同时在 onBeforeUnmount 中兜底清理，避免内存泄漏；activated 中应防重复创建，必要时结合页面可见性降频或改用 WebSocket。
在 Vue 3 动态组件中使用 <KeepAlive> 时，定时器不会随路由切换而自动停止——因为组件只是被缓存，并未卸载。若不主动管理，setInterval 会在后台持续运行，造成 CPU 占用、内存泄漏和电量快速消耗。关键在于：**不是等它销毁，而是在失活时立即停，在激活时按需启**。
必须在 deactivated 中清除，不能只靠 unmounted
<KeepAlive> 下的组件不会触发 onBeforeUnmount 或 unmounted，所以仅靠这些钩子清理会完全失效。必须改用 onDeactivated：
- 在
onDeactivated中调用clearInterval(timer.value)并置空引用（timer.value = null） - 确保 timer 是响应式引用（
ref(null)），避免闭包或作用域丢失 - 若存在多个定时器（如轮询 + 心跳），建议统一存入数组（
const timers = ref([])），退出时遍历清除
activated 中重启前先检查是否已存在
组件反复激活时，若每次都在 onActivated 中直接 setInterval，会导致多个定时器叠加：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 每次启动前先执行
clearTimer()（即使timer.value为null，clearInterval也是安全的） - 只在
timer.value === null时才新建定时器，避免重复创建 - 示例逻辑：if (!timer.value) timer.value = setInterval(...)
兜底清理：兼容组件被强制移出缓存的场景
当 <KeepAlive max="2"> 达到上限，或通过 exclude 动态剔除组件时，该组件会被真正销毁——此时 onDeactivated 不会触发，必须靠 onBeforeUnmount 补位：
立即学习“前端免费学习笔记（深入）”；
- 把清理逻辑抽成独立函数，例如
function clearTimers() { if (timer.value) { clearInterval(timer.value); timer.value = null; } } - 在
onDeactivated和onBeforeUnmount中都调用它 - 这样无论组件是“缓存失活”还是“彻底销毁”，资源都能被释放
进阶优化：配合页面可见性降频
对非强实时任务（如状态轮询、用户行为上报），可进一步降低后台功耗：
- 监听
document.visibilityState，页面隐藏时暂停定时器，显示时恢复 - 高频轮询可用
requestIdleCallback替代setInterval，让浏览器在空闲时段执行 - 长期方案建议用 WebSocket 或服务端推送替代前端轮询，从根源上减少定时器依赖
