keepalive组件页面遮挡时定时器仍运行，需用page visibility api监听visibilitychange事件，在可见时启动、隐藏时暂停定时器，并在onbeforeunmount中兜底清理。
页面被遮挡（比如切到其他标签页、最小化浏览器）时，KeepAlive 缓存的组件依然在内存中运行，定时器不会自动停止。要真正暂停，得结合 document.visibilityState 主动控制。
监听页面可见性变化
利用浏览器原生的 Page Visibility API，在组件激活后监听 visibilitychange 事件，根据 document.hidden 或 document.visibilityState 判断当前是否可见。
- 在
onActivated中添加事件监听，并启动定时器 - 在
onDeactivated中移除监听（避免跨组件干扰），但不直接清定时器——因为页面可能只是暂时失焦，仍需保持状态 - 在监听回调里：若
visibilityState === 'hidden'，则clearInterval；若变为'visible'，再重新setInterval
统一管理定时器引用
避免多个定时器叠加或清理遗漏，建议用响应式变量集中管理：
- 定义
const timer = ref(null)，并在每次设新定时器前先clearInterval(timer.value) - 配合标记位如
const isPageVisible = ref(true)，让定时器逻辑只在可见时执行（即使没清除，也可在回调开头加if (!isPageVisible.value) return） - 所有定时器操作都封装进一个
startTimer()/stopTimer()方法，便于复用和测试
兜底清理不能少
KeepAlive 组件不会触发 unmounted，但某些场景下（如 max 达限、exclude 匹配、手动调用 router.replace）仍可能被真实销毁。因此：
- 在
onBeforeUnmount中再次调用stopTimer() - 确保
stopTimer是幂等的：对null或已清除的timer.value调用clearInterval安全无副作用 - 如果使用了
setTimeout，同样需要保存 ID 并统一清理
非强实时任务可进一步降频
对轮询类逻辑（如状态检查、埋点上报），不必严格每秒执行：
- 页面隐藏时，可将间隔拉长到 30 秒或暂停；恢复可见时再切回正常频率
- 用
requestIdleCallback替代高频setInterval，让任务在浏览器空闲时段执行，减少卡顿和功耗 - 长期来看，优先考虑服务端推送（WebSocket 或 Server-Sent Events），彻底消除前端轮询依赖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
