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 中这样写：
• data 中维护 cachedComponents 数组，根据 $route.meta.keepAlive 动态更新

这样既能享受 activated/deactivated 的便利，又避免把登录页、404 页等不该缓存的组件也塞进内存。