activated和deactivated是专为keep-alive缓存组件设计的生命周期钩子，仅对被keep-alive包裹的命名组件生效；activated在组件从缓存激活时执行，用于刷新数据、恢复状态；deactivated在组件进入缓存前执行，用于清理定时器、解绑事件等资源。
在 Options API 中，activated 和 deactivated 是专为 <keep-alive> 缓存组件设计的生命周期钩子，它们只对被 <keep-alive> 包裹的**命名组件**生效。这两个钩子不替代 mounted 或 beforeUnmount，而是补充缓存场景下的状态管理逻辑。
activated 钩子：组件“醒来”时恢复现场
当组件从缓存中重新插入 DOM（比如路由切回、动态组件再次显示），activated 会执行。它不发生在首次挂载时（首次走的是 created → mounted），只负责“再激活”行为。
- 适合发起数据刷新请求（如拉取最新列表、检查详情变更）
- 可恢复滚动位置（需配合
ref或sessionStorage保存的偏移量） - 重启定时器、轮播、WebSocket 心跳等暂停的异步任务
- 重置局部 UI 状态（例如清空搜索框输入、隐藏加载提示、重置表单校验标记）
deactivated 钩子：组件“休眠”前清理资源
当组件即将被隐藏但不销毁（即进入缓存），deactivated 会被调用。这是释放副作用的关键时机，否则容易引发内存泄漏或逻辑错乱——因为组件实例仍在内存中，只是不可见。
- 清除定时器：
clearInterval(this.timerId)、clearTimeout(this.timeoutId) - 解绑手动添加的事件监听器：
window.removeEventListener('resize', this.handleResize) - 暂停轮询、取消未完成的请求（如用
AbortController） - 暂存当前状态到
ref、localStorage或vuex/pinia（如筛选条件、表单草稿）
注意事项与常见误区
必须是命名组件：组件需有明确的 name 选项，否则 activated/deactivated 不会触发。
不能替代初始化逻辑：首次加载的数据获取、DOM 初始化仍应在 created 或 mounted 中完成；activated 只做“增量恢复”。
不适用于 SSR：这两个钩子在服务端渲染期间不会执行。
与 <keep-alive> 的包裹方式强相关：需确保组件确实被 <keep-alive> 包裹（例如在 <router-view> 外层加 <keep-alive>，或使用 include 属性精准控制缓存范围）。
