activated 是 keep-alive 组件中唯一可重复触发的钩子，仅在组件首次挂载被 keep-alive 包裹或从缓存唤醒显示时执行，用于刷新数据、重启定时器、重绑事件等；需与 deactivated 配对清理资源，并配合路由 meta 精准控制缓存粒度。
activated 是 keep-alive 组件中唯一真正“可重复触发”的活跃钩子，它不依赖组件创建，只响应“从缓存中唤醒并显示”这一动作。用对时机，才能避免数据陈旧、定时器堆积或状态错乱。
activated 什么时候真正执行？
它只在两种情况下触发：
- 组件首次被挂载且被 keep-alive 包裹时（顺序：created → mounted → activated）
- 组件已缓存，再次回到视图（比如路由切回、v-if 切换为 true、动态组件 is 变更后命中缓存）时，仅触发 activated，不再走 created/mounted
注意：如果组件没被 keep-alive 包裹，activated 根本不会执行——它不是 Vue 的通用钩子，而是缓存机制的专属信号。
activated 里该做什么？
核心原则：做“每次显示都需要刷新或重启”的事，而不是“只初始化一次”的事。
- 重新拉取最新数据（如详情页返回时刷新评论列表）
- 重启定时器（比如倒计时、轮播、心跳检测）
- 重新绑定 DOM 事件（尤其手动添加的 addEventListener）
- 恢复滚动位置（配合 ref 或 $nextTick 获取真实 DOM 后调用 scrollIntoView 或 scrollTop）
- 重置临时 UI 状态（如折叠面板展开态、搜索框聚焦）
别在这里初始化 data、methods 或 watch——这些已在 created 里完成；也别发一次性请求（如用户基本信息），那该放在 created 里。
deactivated 必须配对清理
activated 干什么，deactivated 就得反向收尾，否则内存泄漏风险很高：
- clearInterval / clearTimeout 对应的定时器 ID
- removeEventListener 移除手动绑定的事件
- 取消未完成的 axios 请求（用 CancelToken 或 AbortController）
- 保存当前关键状态到 Vuex/Pinia 或 localStorage（如表单草稿、筛选条件）
例如：activated 中启动了 this.timer = setInterval(...), 那 deactivated 中必须写 clearInterval(this.timer)；漏掉就会让定时器持续运行，即使组件已不可见。
配合路由 meta 控制缓存粒度
实际项目中，不是所有页面都适合缓存。可通过路由 meta 和 include/exclude 精准控制：
- 在路由定义中加 meta: { keepAlive: true }
- App.vue 中这样写：
<keep-alive :include="cachedComponents"><router-view></router-view></keep-alive> - data 中维护 cachedComponents 数组，根据 $route.meta.keepAlive 动态更新
这样既能享受 activated/deactivated 的便利，又避免把登录页、404 页等不该缓存的组件也塞进内存。
