Vue3 KeepAlive 缓存组件：动态切换与生命周期管理实践
在 Vue3 中，KeepAlive 是内置组件之一，用于在多个组件动态切换时缓存被移除的组件实例，避免重复销毁和创建带来的性能损耗。本文将结合实际代码，从基本用法到 include/exclude 控制、最大缓存数、以及 onActivated/onDeactivated 生命周期钩子，全面解析 KeepAlive 的使用细节。## 一、动态组件与 KeepAlive 基础
Vue3 的 <component> 元素是一个“元组件”，通过 is prop 动态渲染实际组件。默认情况下，每次切换组件时，旧的组件实例会被销毁，新的实例重新创建。使用 KeepAlive 包裹 <component> 后，切换行为变为“休眠/唤醒”，组件的状态（如表单输入、计数器）得以保持。
### 示例：未使用 KeepAlive
父组件 App.vue：
<template>
<div>
<input type="radio" v-model="activeComponent" :value="A" />
<label for="A">A</label>
<input type="radio" v-model="activeComponent" :value="B" />
<label for="B">B</label>
</div>
<div>Current component：{{ activeComponent.__name }}</div>
<div>
<component :is="activeComponent" />
</div>
</template>
<script setup>
import { shallowRef, watch } from 'vue';
import A from '@/components/A.vue';
import B from '@/components/B.vue';
const activeComponent = shallowRef(A);
watch(activeComponent, (newVal) => {
console.log(newVal);
});
</script>
子组件 A.vue 维护一个计数，B.vue 维护一个输入框内容。切换时组件状态会丢失。
### 示例：使用 KeepAlive
只需在 <component> 外层包裹 <KeepAlive>：
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
此时切换组件，之前的计数和输入内容会被保留。
## 二、包含/排除（include/exclude）
KeepAlive 默认缓存所有内部切换的组件。若只想缓存部分组件，可通过 include 或 exclude prop 定制，匹配规则基于组件的 name 选项。
三种写法：
<!-- 逗号分隔字符串 -->
<KeepAlive include="a,b">
<component :is="view" />
</KeepAlive>
<!-- 正则表达式 -->
<KeepAlive :include="/a|b/">
<component :is="view" />
</KeepAlive>
<!-- 数组 -->
<KeepAlive :include="['a', 'b']">
<component :is="view" />
</KeepAlive>
注意：组件必须显式声明 name 选项（在 <script setup> 中可通过文件名自动生成，Vue 3.2.34+ 支持）。
## 三、最大缓存实例数（max）
通过 max prop 限制缓存实例数量，行为类似 LRU 缓存——当超过最大值时，最久未访问的缓存实例会被销毁。
<KeepAlive :max="10">
<component :is="activeComponent" />
</KeepAlive>
## 四、缓存实例的生命周期钩子
被 KeepAlive 缓存的组件不会卸载，而是变为“不活跃”状态。通过 onActivated 和 onDeactivated 可以感知激活/休眠时机：
<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {
// 首次挂载或每次从缓存重新插入时触发
})
onDeactivated(() => {
// 从 DOM 移除、进入缓存或组件卸载时触发
})
</script>
### 嵌套组件的执行顺序
假设 A 组件包含子组件 A1，B 组件包含子组件 B1。切换时，生命周期钩子的执行顺序为“先子后父”且“先休眠后激活”。例如从 A 切换到 B：
- 先执行 A 内部所有子组件的 onDeactivated
- 再执行 A 自身的 onDeactivated
- 然后执行 B 内部所有子组件的 onActivated
- 最后执行 B 自身的 onActivated
代码示例（仅展示关键部分）：
// A.vue 与 A1.vue 均注册钩子
// A1.vue
onActivated(() => console.log('A1 onActivated'))
onDeactivated(() => console.log('A1 onDeactivated'))
// A.vue
onActivated(() => console.log('A onActivated'))
onDeactivated(() => console.log('A onDeactivated'))
## 总结
KeepAlive 是 Vue3 中优化组件切换性能的核心工具，适用于表单步骤、标签页等场景。通过 include/exclude 精确控制缓存范围，max 避免内存溢出，onActivated/onDeactivated 处理缓存状态下的业务逻辑（如数据刷新）。在实际项目中，建议优先使用 include 明确需要缓存的组件，结合 max 限制缓存数量，避免不必要的内存占用。
Re: Vue3 KeepAlive 缓存组件：动态切换与生命周期管理实践
这篇文章写得很清晰实用，从基础到进阶都覆盖了，尤其是生命周期钩子的执行顺序和嵌套组件的例子，对实际开发很有帮助。感谢分享！Re: Vue3 KeepAlive 缓存组件：动态切换与生命周期管理实践
感谢分享，很实用的实践总结！最近正好在调 KeepAlive 的缓存策略，你提到的 include/exclude 和 max 配合着生命周期钩子的顺序，帮我理清了之前模糊的地方。特别是嵌套组件里“先子后父、先休眠后激活”的执行流程，之前看文档没太注意，这下清楚了。Re: Vue3 KeepAlive 缓存组件：动态切换与生命周期管理实践
楼主把 KeepAlive 的用法梳理得很清楚，尤其是 include/exclude 和 max 的细节，平时容易忽略。想请教一下，在 里组件 name 自动推断的版本限制（3.2.34+），如果项目版本比较旧，是不是就得手动写 name 选项才能生效？这个坑踩过几次，后来干脆统一在 defineOptions 里声明了。另外 onActivated/onDeactivated 的执行顺序那段对排查问题挺有帮助，感谢分享。
页:
[1]