keep-alive 是 Vue.js 的内置组件，主要用于缓存非活动组件实例，避免重复渲染和销毁，从而提升应用性能和用户体验。其核心作用与应用场景如下：
核心作用
1.保留组件状态
-
被包裹的组件切换时（如路由跳转或动态组件切换），其内部状态（如数据、计算属性、表单输入值等）会被保留在内存中，再次激活时直接恢复状态，避免重新初始化 。
-
典型场景：从商品列表页进入详情页后返回，列表的筛选条件或滚动位置保持不变 。
2.优化性能
-
减少 DOM 渲染开销：避免组件频繁切换时重复创建和销毁实例，复用已缓存的组件实例及对应的虚拟 DOM 结构 。
-
降低资源消耗：跳过重复的数据请求、计算逻辑及 DOM 操作，尤其对复杂组件效果显著 。
3.控制缓存策略
-
通过 include/exclude 属性指定需缓存或排除的组件（支持字符串、正则或数组）。
-
通过 max 属性限制最大缓存实例数（采用 LRU 算法淘汰最久未使用的实例）。
生命周期变化
被 keep-alive 包裹的组件会触发专属钩子：
-
activated：组件被激活（从缓存恢复）时调用，适合执行数据刷新等逻辑 。
-
deactivated：组件被停用（进入缓存）时调用，适合清除定时器等资源 。
注：常规的 created/mounted 仅在初次渲染时触发一次 。
适用场景
1.高频切换的组件
- Tab 标签页切换、动态组件渲染（如 ）。
2.需保持状态的页面
-
列表页 → 详情页 → 返回列表页（保留列表状态）。
-
多步骤表单的步骤切换 。
3.复杂组件的性能优化
- 避免大数据量表格、图表等重渲染带来的卡顿 。
注意事项
-
缓存并非万能：过度使用可能导致内存占用过高，需结合实际场景通过 include/exclude 精细控制 。
-
动态组件需绑定 key：避免复用导致状态错乱（如：
<keep-alive><component :key="route.path" /></keep-alive>）。 -
不依赖实时更新的组件：需要每次渲染都获取最新数据的组件（如实时监控）不适合缓存 。
原理简述
-
通过内置缓存对象（cache）存储组件实例，以组件标识（如 name + 路径）为 Key 。
-
命中缓存时直接复用实例，触发 activated 钩子；未命中时新建实例并存入缓存 。
-
缓存内容包含：虚拟 DOM 树、组件状态、DOM 节点信息 。
通过合理应用 keep-alive，可显著提升应用流畅度与用户体验，但需结合业务需求权衡缓存策略 。
