keep-alive 是抽象组件，不渲染 DOM，仅缓存组件实例并提供 activated/deactivated 钩子；首次挂载触发 created/mounted，缓存激活/失活时触发对应钩子，状态全保留；支持 include/exclude/max 精细控制，组件需声明 name 才能匹配。
Vue 的 keep-alive 不是普通组件，而是一个抽象组件，它本身不渲染 DOM，只负责缓存被包裹的组件实例。它的核心价值在于保留状态、避免重复创建销毁，同时引入了两个专属生命周期钩子：activated 和 deactivated。
keep-alive 中组件的生命周期变化
被 keep-alive 包裹的组件，除了常规的 created、mounted 等钩子（仅在首次挂载时触发），还会额外响应两个缓存感知的钩子：
- activated：组件从缓存中激活并显示时触发，包括首次渲染和后续从缓存恢复两种情况
- deactivated：组件被切换出去、进入缓存状态时触发，此时组件未被销毁，但已暂停响应
注意：created/mounted 不会再次执行；data、computed、watch、DOM 结构、滚动位置、表单输入等全部保留在内存中。
常见且实用的应用场景
keep-alive 解决的是“状态丢失”和“重复开销”问题，典型用例包括：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 路由页面缓存：用户从列表页跳转详情页再返回，列表页保持原有滚动位置、筛选条件和加载状态
- Tab 标签页切换：多个 Tab 对应不同组件，切换时不重载、不重置，各 Tab 独立保有自身状态
- 多步骤表单/向导流程：用户在步骤间来回跳转时，已填写的数据、校验结果、临时文件上传状态均持续存在
- 搜索+结果页联动：搜索页输入关键词后跳转结果页，返回时搜索框内容、历史记录、分页参数自动还原
精准控制缓存行为的关键配置
默认情况下，keep-alive 会缓存所有子组件，但实际项目中往往需要按需缓存。可通过以下 props 实现精细化管理：
- include：只缓存匹配的组件，支持字符串（如 "UserList"）、逗号分隔字符串（"Home,About"）、正则（/^User/）或数组（['OrderList', 'Profile']）
- exclude：排除指定组件，优先级高于 include，常用于排除带实时数据或需每次都刷新的页面（如登录页、统计看板）
- max：限制最大缓存数量，超出时按 LRU（最近最少使用）策略自动剔除最久未激活的缓存项
⚠️ 注意：被缓存的组件必须显式声明 name 选项（如 export default { name: 'UserProfile' }），否则 include/exclude 无法匹配生效。
配合生命周期钩子做状态协同
activated 和 deactivated 是与缓存机制深度绑定的时机点，适合执行轻量级同步操作：
- 在 activated 中：重新拉取增量数据（如未读消息数）、恢复定时器、聚焦输入框、触发动画入场
- 在 deactivated 中：暂停轮询请求、清除定时器、保存临时草稿、取消未完成的上传任务
这些操作不会干扰组件本身的响应式逻辑，又能确保缓存组件的行为符合业务预期。
