onactivated和ondeactivated是keep-alive组件的缓存生命周期钩子，用于处理激活/休眠状态：前者执行数据刷新、滚动恢复等唤醒操作，后者负责清理定时器、事件监听等资源；二者需被keep-alive包裹、组件有name、在setup中声明才生效。
在使用 <keep-alive></keep-alive> 缓存组件时，onActivated 和 onDeactivated 是管理组件“沉睡—唤醒”状态的核心钩子。它们不替代 onMounted 或 onUnmounted，而是专用于缓存生命周期：组件没被销毁，只是暂时不可见；再次显示时也不重新挂载，只“激活”。正确使用这两个钩子，才能避免状态错乱、内存泄漏和数据陈旧。
onActivated：组件“醒来”时该做的事
每次组件从缓存中恢复显示（比如路由切回、Tab 页切换回来），onActivated 就会执行。它不是首次加载的入口，所以初始化逻辑仍应留在 onMounted 中。
- 重新拉取关键数据（如列表页刷新、详情页校验更新）
- 恢复滚动位置（配合
useScroll或手动保存的ref偏移量） - 重启被暂停的定时器或轮播动画
- 重置临时 UI 状态（如搜索框聚焦、表单校验失败提示、loading 标记）
onDeactivated：组件“休眠”前必须清理的事
当组件即将隐藏并进入缓存（而非销毁），onDeactivated 是最后的资源清理时机。若跳过这一步，组件实例仍在内存中运行，却不再可见——极易引发内存泄漏或逻辑冲突。
- 清除所有定时器（
clearInterval/clearTimeout） - 解绑手动添加的全局事件监听（如
window.addEventListener('resize', ...)） - 暂停 WebSocket 心跳或后台轮询请求
- 将当前可恢复的状态暂存（如表单草稿、筛选条件、分页页码）到
ref、localStorage或 pinia store
必须注意的生效前提
这两个钩子不会自动生效，需满足三个硬性条件：
- 组件必须被
<keep-alive></keep-alive>显式包裹（例如<keep-alive><router-view></router-view></keep-alive>） - 组件自身需声明
name选项（尤其在动态组件或复用同一 .vue 文件的多路由场景下） - 钩子必须在
setup()函数内部调用，不能写在onBeforeUnmount或外部作用域中
配合路由缓存的实用建议
在 Vue Router 场景中，盲目缓存所有页面容易导致内存膨胀或状态污染。推荐用 :include 精确控制：
- 只缓存高频切换、状态贵重的页面（如首页、订单列表、编辑表单）
- 排除敏感页或无需状态保持的页面（如登录页、支付成功页），用
exclude - 设置
max限制缓存数量，防止 LRU 失效后内存持续增长
