使组件复用而非销毁重建，首次走完整生命周期，后续仅触发activated（激活时）和deactivated（停用时）钩子；需刷新逻辑放activated，清理逻辑放deactivated，缓存由include/exclude/max控制。

启用 后，组件不再随路由或状态切换而销毁重建，生命周期行为发生本质变化：首次进入走完整流程，后续复用跳过创建和挂载，只触发激活与停用钩子。

activated 和 deactivated 成为核心控制点

这两个钩子替代了原本依赖 mounted 或 created 的逻辑执行时机：

• onActivated 在组件被“唤醒”时调用——包括首次挂载、以及从缓存中再次显示时
• onDeactivated 在组件被“休眠”时调用——离开当前视图但未销毁，比如切到其他标签页
• mounted 只执行一次，适合初始化 DOM 绑定、第三方库实例等一次性操作
• created 同样只执行一次，适合初始数据结构定义、响应式属性声明

典型场景下的逻辑分配原则

缓存后，必须区分“只做一次”和“每次都要”的动作：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 需要每次刷新的数据请求、轮播图重置、定时器重启 → 放在 onActivated 中
• 需清理的副作用，如 WebSocket 断开、定时器清除、未完成的 API 请求取消 → 放在 onDeactivated 中
• 表单输入、滚动位置、筛选条件等用户态数据 → 自动保留，无需额外处理
• 依赖外部状态（如全局 store）可能变化的部分 → 建议在 onActivated 中校验并同步

缓存控制与生命周期配合使用

提供的 include、exclude、max 属性直接影响哪些组件能进入缓存队列，进而决定其是否拥有 activated/deactivated：

• 用 include 精确指定需缓存的组件名（支持字符串、数组、正则），避免误缓存
• 用 exclude 排除动态内容强、状态易失效的组件（如含实时时间戳的看板页）
• max 控制缓存数量，超出时按 LRU 策略剔除最早缓存项，被剔除的组件会触发 beforeUnmount 和 unmounted

配合 router-view 的常见写法

在 Vue Router 场景中， 是一个组件，可直接包裹在 内：

• 全局缓存所有路由组件：
• 按需缓存：结合 meta 字段 + include 动态计算，例如只缓存 meta.keepAlive === true 的页面
• 注意：被 exclude 的路由组件仍会走完整生命周期，activated/deactivated 不会触发

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！