keep-alive 组件需通过 activated/deactivated 钩子精准控制定时器与状态：激活时恢复定时器、滚动位置、UI状态并按需刷新数据；失活时清除定时器、取消请求、解绑事件并保存状态；动态路由下须用 $route.fullPath 等唯一 key 保证实例隔离；倒计时等状态应基于时间戳计算以确保响应式同步。
keep-alive 激活时重新校准定时器与状态，核心是利用 activated 和 deactivated 钩子做精准控制：激活时恢复，失活时清理，避免内存泄漏和状态错乱。
用 activated 恢复定时器与关键状态
组件被缓存后不会重复执行 mounted，所以所有依赖“重新显示”的逻辑必须移到 activated 中。
- 在 activated 里重启定时器（如轮询、倒计时），不要直接 new setInterval，而是先清除旧的再新建，或统一用 ref 管理句柄
- 恢复滚动位置：调用 scrollIntoView 或使用 element.scrollTop = savedScrollTop
- 重置临时 UI 状态：比如按钮 loading 状态、表单编辑标记，但注意别覆盖用户未提交的输入
- 按需刷新数据：可结合时间戳判断是否过期，避免每次激活都发请求
用 deactivated 主动清理副作用
deactivated 是唯一可靠的“退出前”时机，必须在这里释放资源，否则定时器会持续运行，造成内存泄漏和逻辑错乱。
- clearInterval / clearTimeout：用 ref 存储定时器 ID，在 deactivated 中清除
- 取消未完成的请求：AbortController.signal 配合 fetch，或在请求发起前检查组件是否已失活
- 解绑全局事件监听器（如 window.resize、keydown），避免重复绑定
- 保存可恢复状态到 localStorage 或 pinia，供下次 activated 读取
确保组件实例隔离（尤其动态路由）
如果多个路由复用同一组件（如 /user/1 和 /user/2），仅靠 name 会导致状态混用。必须配合 key 强制区分实例：
- 推荐写法：<router-view :key="$route.fullPath" /> 或 <router-view :key="$route.name + '-' + $route.params.id" />
- key 变化会让 Vue 视为新组件，触发完整生命周期（包括 mounted），从而让每个 ID 对应独立的定时器和状态
- 避免用 $route.params（对象引用不变）或 Math.random()（无法持久缓存）作 key
配合响应式状态做细粒度校准
定时器驱动的状态更新（如倒计时剩余秒数）需保证响应式，且在失活时暂停、激活时同步剩余时间。
- 定义 ref 记录开始时间与总时长，计算属性 derived 剩余时间，比单纯递减更可靠
- deactivated 时记录当前已流逝时间；activated 时根据新时间戳重新计算剩余值
- 对富文本、canvas、第三方图表等非响应式内容，在 activated 中手动调用其恢复方法（如 quill.setContents）
