activated 是 keep-alive 专属钩子，仅在组件被 keep-alive 包裹且从缓存唤醒显示时触发，用于刷新数据、重启定时器等；须与 deactivated 配对清理资源，并配合 meta 或 include 精准控制缓存粒度。
activated 钩子只在组件被 <keep-alive></keep-alive> 包裹且真正“回到视图”时触发，不是每次渲染都执行，而是精准响应“从缓存唤醒并显示”这一动作。用对它，才能让缓存组件既省资源又保持状态鲜活。
确保组件真的被 keep-alive 包裹
activated 不是 Vue 的通用生命周期钩子，它只属于缓存机制。如果组件没被 <keep-alive></keep-alive> 包裹，哪怕写了 activated 方法也不会调用。
- 检查模板中是否正确包裹：比如
<keep-alive><router-view></router-view></keep-alive>或<keep-alive><component :is="currentComp"></component></keep-alive> - 注意 exclude/include 规则：若组件名匹配了
exclude，即使写了<keep-alive></keep-alive>，activated 也不会执行 - 路由场景下，避免直接写
<router-view></router-view>而不加 keep-alive —— 这样所有切换都会销毁重建，activated 彻底失效
把需要“每次显示都执行”的逻辑挪到 activated 里
created 和 mounted 只在首次加载时运行一次；而 activated 在每次从缓存恢复显示时都会触发，适合放那些必须“保鲜”的操作。
- 重新拉取最新数据（如列表页刷新、详情页校验时效）
- 重启定时器（比如倒计时、心跳检测），避免多个实例叠加运行
- 重绑事件监听（尤其涉及第三方库或手动绑定的 DOM 事件）
- 重置表单局部状态（如清空搜索关键词、还原筛选条件，但保留用户已填的主表单）
务必配对使用 deactivated 清理资源
activated 每次激活做什么，deactivated 就该在失活时反向清理，否则容易内存泄漏或逻辑错乱。
- 在 deactivated 中清除定时器（
clearInterval/clearTimeout） - 解绑事件监听（
removeEventListener或使用事件总线的 off） - 暂停视频/音频播放、断开 WebSocket 连接等耗资源操作
- 避免在 deactivated 中修改响应式数据 —— 此时组件已不可见，更新可能无效或引发警告
按需控制缓存粒度，避免误缓存
不是所有页面都适合一直缓存。配合路由 meta 或动态 include，让 activated 只在真正需要的场景下生效。
- 路由定义中设置
meta: { keepAlive: true }，App.vue 中用v-if="$route.meta.keepAlive"控制是否进 keep-alive - 用
<keep-alive :include="['UserList', 'OrderDetail']"></keep-alive>显式声明哪些组件可缓存 - 关键页面（如草稿编辑页）缓存 + activated 刷新时间戳；工具类页面（如帮助中心）不缓存，免得干扰导航逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
