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

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

目录 一、`KeepAlive` 基本概念二、`KeepAlive` 的核心原理三、`KeepAlive` 关键属性解析1. `include`：指定需要缓存的组件2. `exclude`：指定不需要缓存的组件3. `max`：最大缓存组件数 四、`KeepAlive` 生命周期五、具体使用场景六、常见问题及解决方案1. **`activated` 和 `deactivated` 不触发**2. **`keep-alive` 组件缓存过多导致内存占用**3. **如何手动清除缓存**4. **如何手动清除 `keep-alive` 缓存** 七、完整示例：结合 Vue Router八、总结

---

一、KeepAlive 基本概念

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

主要作用：

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

基础使用示例：

<template> <keep-alive> <component :is="currentView"></component> </keep-alive> </template> <script> import A from "./A.vue"; import B from "./B.vue"; export default { data() { return { currentView: "A" }; }, components: { A, B } }; </script>

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

---

二、KeepAlive 的核心原理

组件挂载与缓存

Vue 在创建组件时，会判断是否被 KeepAlive 包裹，如果是，则不会销毁，而是将其存储在 cache 对象中。当组件被切换回来时，会从 cache 取出，而不会重新创建实例。

缓存管理

KeepAlive 组件通过 include 和 exclude 规则控制哪些组件需要缓存，哪些不需要。

生命周期钩子

activated()：组件被缓存后激活时触发。deactivated()：组件被缓存但切换出去时触发。

---

三、KeepAlive 关键属性解析 1. include：指定需要缓存的组件

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

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

这样只有 A 和 B 组件会被缓存。

2. exclude：指定不需要缓存的组件 <keep-alive :exclude="/^Temp/"> <router-view></router-view> </keep-alive>

所有以 Temp 开头的组件都不会被缓存。

3. max：最大缓存组件数 <keep-alive :max="2"> <router-view></router-view> </keep-alive>

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

---

四、KeepAlive 生命周期

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

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

示例：

<script> export default { created() { console.log("组件创建"); }, mounted() { console.log("组件挂载"); }, activated() { console.log("组件被激活"); }, deactivated() { console.log("组件被缓存"); } }; </script>

生命周期触发顺序

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

---

五、具体使用场景

配合 router-view，缓存某些路由

<keep-alive> <router-view></router-view> </keep-alive> 这样切换路由时，已访问的组件会被缓存。

结合 include 指定缓存页面

<keep-alive :include="['Home', 'Profile']"> <router-view></router-view> </keep-alive> 只有 Home 和 Profile 页面会被缓存。

结合 exclude 过滤不需要缓存的页面

<keep-alive :exclude="['Login']"> <router-view></router-view> </keep-alive> Login 页面不会被缓存，其他页面都会缓存。

动态组件缓存

<keep-alive> <component :is="currentComponent"></component> </keep-alive> 切换组件时不会销毁原组件。

---

六、常见问题及解决方案 1. activated 和 deactivated 不触发 确保组件确实被 keep-alive 包裹，并且是动态组件。 2. keep-alive 组件缓存过多导致内存占用 使用 max 限制缓存数：<keep-alive :max="3"> <router-view></router-view> </keep-alive> 3. 如何手动清除缓存 this.$destroy(); // 清除当前组件缓存

或者

this.$parent.$forceUpdate(); // 强制更新 4. 如何手动清除 keep-alive 缓存

可以使用 key 强制重新渲染：

<keep-alive> <component :is="currentComponent" :key="currentKey"></component> </keep-alive>

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

---

七、完整示例：结合 Vue Router <template> <div> <button @click="currentView = 'Home'">Home</button> <button @click="currentView = 'About'">About</button> <keep-alive> <component :is="currentView"></component> </keep-alive> </div> </template> <script> import Home from "./Home.vue"; import About from "./About.vue"; export default { data() { return { currentView: "Home" }; }, components: { Home, About } }; </script>

在这里：

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

---

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

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