Vue核心知识：KeepLive全方位分析

KeepAlive 是 Vue 组件中的一个重要功能，主要用于缓存组件，以提升性能和用户体验。

  

---

一、KeepAlive 根本概念

KeepAlive 是 Vue 内置的一个抽象组件，通常用于包裹动态组件，使其在切换时保持状态，而不是被烧毁和重新创建。
主要作用：

• 缓存组件，制止重复创建和烧毁，提升性能。
  
• 保持组件状态，例如表单填写、用户滚动位置等不会丢失。
  
• 实用于router-view和component动态组件。
  

基础使用示例：

1. <template>
2.   <keep-alive>
3.     <component :is="currentView"></component>
4.   </keep-alive>
5. </template>
7. <script>
8. import A from "./A.vue";
9. import B from "./B.vue";
11. export default {
12.   data() {
13.     return {
14.       currentView: "A"
15.     };
16.   },
17.   components: { A, B }
18. };
19. </script>

复制代码

在上述代码中，<component :is="currentView">会根据currentView的值动态切换组件，但由于keep-alive的存在，被切换出去的组件不会被烧毁，而是被缓存。

---

二、KeepAlive 的核心原理

• 组件挂载与缓存
  
  
  
  • Vue 在创建组件时，会判断是否被 KeepAlive 包裹，如果是，则不会烧毁，而是将其存储在 cache 对象中。
    
  • 当组件被切换回来时，会从 cache 取出，而不会重新创建实例。
    
  
  
• 缓存管理
  
  
  
  • KeepAlive 组件通过 include 和 exclude 规则控制哪些组件必要缓存，哪些不必要。
    
  
  
• 生命周期钩子
  
  
  
  • activated()：组件被缓存后激活时触发。
    
  • deactivated()：组件被缓存但切换出去时触发。
    
  
  

---

三、KeepAlive 关键属性解析

1. include：指定必要缓存的组件

可以是字符串、正则表达式或数组：

1. <keep-alive :include="['A', 'B']">
2.   <router-view></router-view>
3. </keep-alive>

复制代码

如许只有 A 和 B 组件会被缓存。
2. exclude：指定不必要缓存的组件

1. <keep-alive :exclude="/^Temp/">
2.   <router-view></router-view>
3. </keep-alive>

复制代码

全部以 Temp 开头的组件都不会被缓存。
3. max：最大缓存组件数

1. <keep-alive :max="2">
2.   <router-view></router-view>
3. </keep-alive>

复制代码

最多缓存 2 个组件，超事后会删除最久未使用的组件。

---

四、KeepAlive 生命周期

组件被 keep-alive 缓存时，不会触发 created、mounted，但会触发以下钩子：

• activated()：组件从缓存中激活
  
• deactivated()：组件被缓存但未烧毁
  

示例：

1. <script>
2. export default {
3.   created() {
4.     console.log("组件创建");
5.   },
6.   mounted() {
7.     console.log("组件挂载");
8.   },
9.   activated() {
10.     console.log("组件被激活");
11.   },
12.   deactivated() {
13.     console.log("组件被缓存");
14.   }
15. };
16. </script>

复制代码

生命周期触发次序

• 初次进入：created → mounted → activated
  
• 切换离开：deactivated
  
• 再次进入：activated
  

---

五、详细使用场景

• 配合 router-view，缓存某些路由
  
  1. <keep-alive>
  2.   <router-view></router-view>
  3. </keep-alive>

  复制代码
  
  
  • 如许切换路由时，已访问的组件会被缓存。
    
  
  
• 联合 include 指定缓存页面
  
  1. <keep-alive :include="['Home', 'Profile']">
  2.   <router-view></router-view>
  3. </keep-alive>

  复制代码
  
  
  • 只有 Home 和 Profile 页面会被缓存。
    
  
  
• 联合 exclude 过滤不必要缓存的页面
  
  1. <keep-alive :exclude="['Login']">
  2.   <router-view></router-view>
  3. </keep-alive>

  复制代码
  
  
  • Login 页面不会被缓存，其他页面都会缓存。
    
  
  
• 动态组件缓存
  
  1. <keep-alive>
  2.   <component :is="currentComponent"></component>
  3. </keep-alive>

  复制代码
  
  
  • 切换组件时不会烧毁原组件。
    
  
  

---

六、常见问题及解决方案

1. activated 和 deactivated 不触发

• 确保组件确实被 keep-alive 包裹，而且是动态组件。
  

2. keep-alive 组件缓存过多导致内存占用

• 使用 max 限制缓存数：
  1. <keep-alive :max="3">
  2.   <router-view></router-view>
  3. </keep-alive>

  复制代码

3. 怎样手动清除缓存

1. this.$destroy(); // 清除当前组件缓存

复制代码

或者

1. this.$parent.$forceUpdate(); // 强制更新

复制代码

4. 怎样手动清除 keep-alive 缓存

可以使用 key 逼迫重新渲染：

1. <keep-alive>
2.   <component :is="currentComponent" :key="currentKey"></component>
3. </keep-alive>

复制代码

每次切换 currentKey，都会重新渲染组件。

---

七、完整示例：联合 Vue Router

1. <template>
2.   <div>
3.     <button @click="currentView = 'Home'">Home</button>
4.     <button @click="currentView = 'About'">About</button>
6.     <keep-alive>
7.       <component :is="currentView"></component>
8.     </keep-alive>
9.   </div>
10. </template>
12. <script>
13. import Home from "./Home.vue";
14. import About from "./About.vue";
16. export default {
17.   data() {
18.     return {
19.       currentView: "Home"
20.     };
21.   },
22.   components: { Home, About }
23. };
24. </script>

复制代码

在这里：

• Home 和 About 组件可以自由切换，而且会被 keep-alive 缓存。
  

---

八、总结

• KeepAlive 主要用于缓存动态组件，制止重复创建和烧毁，提高性能。
  
• 关键属性：
  
  
  
  • include 指定缓存组件。
    
  • exclude 排除不必要缓存的组件。
    
  • max 限制最大缓存数。
    
  
  
• 组件生命周期：
  
  
  
  • activated() 组件被激活
    
  • deactivated() 组件被缓存
    
  
  
• 实用于 router-view 及 component 组件，适合缓存列表、表单、复杂页面状态。
  

如果在项目中精确使用 KeepAlive，可以大幅提升前端性能，制止页面状态丢失，提高用户体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。