当前位置：首页 > news >正文

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

news 来源：原创 2025/5/19 12:15:35

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>

在这里：