目录

一、什么是keep-alive？

与普通组件切换的对比

二、核心用法详解

1. 基础用法：动态组件缓存

2. 路由视图缓存 

3. 生命周期钩子

三、进阶配置与优化

1. 精准控制缓存组件

（1）include/exclude属性

（2）max属性限制缓存数量

四、实战场景与案例

1. 表单数据保存

2. 标签页切换优化

3. 动态控制缓存

五、避坑指南

1. 组件必须定义name属性

2. 避免过度缓存

3. 相同路由不同参数导致缓存失效

六、性能优化建议

七、总结

---

一、什么是keep-alive？

keep-alive是Vue2中用于缓存不活跃组件实例的抽象组件。其核心作用是：

• 保留组件状态（如表单输入、滚动位置、定时器等）
• 避免重复渲染（跳过created/mounted等生命周期）
• 优化性能（减少DOM操作和数据请求）

与普通组件切换的对比

场景	普通组件	keep-alive包裹组件
切换时	销毁并重建	隐藏并缓存
状态保留	否	是
性能开销	高（需重新渲染）	低（直接复用）

 

二、核心用法详解

1. 基础用法：动态组件缓存

<template><keep-alive><component :is="currentTab" /></keep-alive>
</template><script>
export default {data() {return {currentTab: 'Home'}},components: {Home, About}
}
</script>

 

• 效果：当currentTab在Home和About之间切换时，组件实例会被缓存，状态不会丢失。

2. 路由视图缓存 

<template><keep-alive><router-view /></keep-alive>
</template>

• 适用场景：缓存路由组件（如商品列表页、用户主页等），返回时无需重新加载数据。

3. 生命周期钩子

被keep-alive包裹的组件会触发两个特殊钩子：

export default {activated() {console.log('组件被激活');// 重新获取数据或恢复定时器},deactivated() {console.log('组件被缓存');// 清除定时器或取消事件监听}
}

 

• 注意：created/mounted等常规钩子仅在首次加载时调用一次。

 

三、进阶配置与优化

1. 精准控制缓存组件

（1）include/exclude属性

<!-- 只缓存Home和About组件 -->
<keep-alive :include="['Home', 'About']"><router-view />
</keep-alive><!-- 排除User组件不缓存 -->
<keep-alive exclude="User"><router-view />
</keep-alive>

 

• 支持格式：字符串、正则表达式、数组
• 规则：组件需定义name属性才能被匹配

（2）max属性限制缓存数量

<!-- 最多缓存3个组件实例 -->
<keep-alive :max="3"><router-view />
</keep-alive>

• 底层机制：基于LRU（最近最少使用）算法，当缓存超过max时自动淘汰最久未使用的组件。

 

四、实战场景与案例

1. 表单数据保存

需求：用户填写表单后切出页面，返回时数据仍在。

<template><keep-alive><form-component /></keep-alive>
</template>

 

• 优势：避免用户重复输入，提升体验。

2. 标签页切换优化

<template><div><button @click="currentTab = 'TabA'">Tab A</button><button @click="currentTab = 'TabB'">Tab B</button><keep-alive><component :is="currentTab" /></keep-alive></div>
</template>

• 效果：TabA和TabB切换时，组件状态（如表格滚动位置）会被保留。

3. 动态控制缓存

<template><keep-alive><component-a v-if="showA" /><component-b v-if="!showA" /></keep-alive>
</template>

• 场景：根据条件动态切换组件，同时保持缓存。

 

五、避坑指南

1. 组件必须定义name属性

export default {name: 'Home', // 必须定义// ...
}

• 原因：include/exclude依赖组件的name进行匹配。

2. 避免过度缓存

• 问题：缓存过多组件会占用大量内存，尤其在移动端需谨慎使用。
• 解决方案：合理设置max值，或通过exclude排除非必要组件。

3. 相同路由不同参数导致缓存失效

<keep-alive><router-view :key="$route.fullPath" />
</keep-alive>

 

• 原因：默认情况下，<keep-alive>会缓存相同组件的不同参数实例。
• 解决方案：通过key强制区分不同路由参数。

六、性能优化建议

1. 按需缓存：仅对需要保留状态的组件使用keep-alive。
2. 主动清理资源：在deactivated钩子中清除定时器、事件监听等。
3. 结合路由元信息：动态控制是否缓存特定路由。

   // router.js
   {path: '/dashboard',component: Dashboard,meta: { keepAlive: true }
   }// App.vue
   <keep-alive><router-view v-if="$route.meta.keepAlive" />
   </keep-alive>

七、总结

keep-alive是Vue2中优化组件性能的利器，通过缓存实例减少重复渲染，同时保留交互状态。合理使用include/exclude、max属性，结合生命周期钩子，可以显著提升复杂应用的流畅度。在实际开发中，需根据场景权衡缓存策略，避免内存泄漏问题。

建议：对于高频切换的组件（如商品列表、表单页），优先使用keep-alive；对于一次性展示的组件（如登录页），则无需缓存。