Vue3 KeepAlive 深度揭秘：组件缓存的魔法是如何实现的？
本文将带你深入 Vue3 内核，从源码层面彻底搞懂 KeepAlive 组件的缓存机制、LRU 淘汰策略以及组件"失活"与"激活"的底层实现原理。
📋 文章导航
1. 为什么需要 KeepAlive？
1.1 实际业务场景
在开发后台管理系统或多标签页应用时，我们经常会遇到这样的需求：
-
表单页面：用户填写了一半的表单，切换到其他页面查看资料，返回时期望表单数据还在
-
列表页面：滚动到第 N 页，查看详情后返回，期望回到原来的滚动位置
-
地图应用：地图已经缩放和平移到特定位置，切换页面后返回保持原状
1.2 没有 KeepAlive 的问题
<template>
<button @click="currentView = 'A'">页面A</button>
<button @click="currentView = 'B'">页面B</button>
<!-- 普通动态组件切换 -->
<component :is="currentView" />
</template>
<script setup>
import { ref } from "vue";
import ViewA from "./ViewA.vue";
import ViewB from "./ViewB.vue";
const currentView = ref("ViewA");
</script>
问题：当从 A 切换到 B 时，A 组件会被完全销毁（触发 onUnmounted），状态全部丢失。再切回 A 时，组件重新创建，所有数据重置。
1.3 KeepAlive 的解决方案
KeepAlive 通过组件级缓存完美解决这个问题：
- 组件切换时不会销毁，而是进入"失活"状态
- 组件实例、响应式数据、DOM 状态全部保留
- 切换回来时"激活"，瞬间恢复，无需重新渲染
2. KeepAlive 基础使用
2.1 基本用法
<template>
<button
v-for="tab in tabs"
:key="tab"
@click="currentTab = tab"
:class="{ active: currentTab === tab }"
>
{{ tab }}
</button>
<!-- 使用 KeepAlive 包裹动态组件 -->
<KeepAlive>
<component :is="currentTab" />
</KeepAlive>
</template>
<script setup>
import { ref } from "vue";
import Home from "./Home.vue";
import Posts from "./Posts.vue";
import Archive from "./Archive.vue";
const currentTab = ref("Home");
const tabs = ["Home", "Posts", "Archive"];
</script>
2.2 重要限制
⚠️ KeepAlive 只能缓存单个直接子节点
<!-- ❌ 错误：多个根节点 -->
<KeepAlive>
<CompA />
<CompB />
</KeepAlive>
<!-- ✅ 正确：使用动态组件包裹 -->
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
<!-- ✅ 正确：使用 v-if 切换单个组件 -->
<KeepAlive>
<CompA v-if="showA" />
<CompB v-else />
</KeepAlive>
3. 核心属性详解
3.1 属性一览表
| 属性 |
类型 |
说明 |
include |
string | RegExp | Array |
只有名称匹配的组件会被缓存 |
exclude |
string | RegExp | Array |
任何名称匹配的组件都不会被缓存 |
max |
number | string |
最多可以缓存多少组件实例 |
3.2 include - 白名单缓存
<!-- 字符串形式（逗号分隔） -->
<KeepAlive include="Home,Posts">
<component :is="currentTab" />
</KeepAlive>
<!-- 数组形式 -->
<KeepAlive :include="['Home', 'Posts']">
<component :is="currentTab" />
</KeepAlive>
<!-- 正则表达式 -->
<KeepAlive :include="/^User/">
<component :is="currentTab" />
</KeepAlive>
匹配规则：与组件的 name 选项进行匹配
<script>
export default {
name: "Home", // 这个名字用于 include/exclude 匹配
// ...
};
</script>
<!-- 或者使用 script setup -->
<script setup>
defineOptions({
name: "Home",
});
</script>
3.3 exclude - 黑名单排除
<!-- 不缓存 Archive 组件 -->
<KeepAlive exclude="Archive">
<component :is="currentTab" />
</KeepAlive>
<!-- 排除多个 -->
<KeepAlive :exclude="['Archive', 'Settings']">
<component :is="currentTab" />
</KeepAlive>
3.4 max - LRU 缓存淘汰
<KeepAlive :max="5">
<component :is="currentTab" />
</KeepAlive>
LRU (Least Recently Used) 算法：
- 设置最大缓存数为 5
- 依次访问 A → B → C → D → E，全部缓存
- 访问 F 时，缓存已满，淘汰最久未使用的 A
- 访问 B，B 变为最近使用
- 访问 G，淘汰 C（现在 C 是最久未使用的）
缓存状态变化示意：
初始: []
访问A: [A]
访问B: [A, B]
访问C: [A, B, C]
访问D: [A, B, C, D]
访问E: [A, B, C, D, E] ← 达到 max
访问F: [B, C, D, E, F] ← A 被淘汰
访问B: [C, D, E, F, B] ← B 移到最近使用
访问G: [D, E, F, B, G] ← C 被淘汰
4. 专属生命周期钩子
被 KeepAlive 缓存的组件会新增两个生命周期钩子：
4.1 生命周期对比
普通组件: KeepAlive 缓存组件:
onMounted onMounted (首次)
↓ ↓
onUnmounted onActivated (每次激活)
↓
onDeactivated (失活)
↓
onActivated (再次激活)
↓
onDeactivated
↓
onUnmounted (真正销毁时)
4.2 钩子函数详解
<script setup>
import { onMounted, onUnmounted, onActivated, onDeactivated } from "vue";
// 首次挂载时触发（仅一次）
onMounted(() => {
console.log("组件首次挂载");
// 适合执行一次性初始化：建立 WebSocket 连接、获取基础配置等
});
// 每次从缓存激活时触发
onActivated(() => {
console.log("组件被激活");
// 适合执行：恢复定时器、重新获取最新数据、恢复滚动位置等
});
// 组件被缓存时触发
onDeactivated(() => {
console.log("组件被失活（进入缓存）");
// 适合执行：暂停定时器、保存临时状态等
});
// 组件真正被销毁时触发（仅一次）
onUnmounted(() => {
console.log("组件被销毁");
// 清理工作：关闭 WebSocket、清除全局事件监听等
});
</script>
4.3 实际应用示例
<script setup>
import { ref, onActivated, onDeactivated } from "vue";
const scrollTop = ref(0);
const timer = ref(null);
const listData = ref([]);
// 激活时恢复状态
onActivated(() => {
// 恢复滚动位置
const container = document.querySelector(".list-container");
if (container) {
container.scrollTop = scrollTop.value;
}
// 重启定时刷新
timer.value = setInterval(fetchLatestData, 5000);
// 重新获取最新数据（可选）
fetchLatestData();
});
// 失活时保存状态
onDeactivated(() => {
// 保存滚动位置
const container = document.querySelector(".list-container");
if (container) {
scrollTop.value = container.scrollTop;
}
// 暂停定时刷新
if (timer.value) {
clearInterval(timer.value);
timer.value = null;
}
});
async function fetchLatestData() {
// 获取最新数据...
}
</script>
5. 底层实现原理
5.1 核心问题拆解
KeepAlive 要实现组件缓存，必须解决三个核心问题：
| 问题 |
解决方案 |
| 如何保存组件状态？ |
使用 Map 缓存组件的 VNode |
| 如何识别缓存组件？ |
通过 shapeFlag 标记组件状态 |
| 如何让组件"隐藏"而不是销毁？ |
使用 move 函数将 DOM 移入隐藏容器 |
5.2 组件状态标记
Vue3 使用 shapeFlag 来标记 VNode 的类型和状态：
// 组件需要被缓存（进入缓存流程）
const COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8; // 256
// 组件已被缓存（从缓存恢复）
const COMPONENT_KEPT_ALIVE = 1 << 9; // 512
标记的作用：
-
COMPONENT_SHOULD_KEEP_ALIVE：告诉渲染器这个组件不应该被销毁，而是执行失活流程
-
COMPONENT_KEPT_ALIVE：告诉渲染器这个组件来自缓存，不需要重新创建实例
5.3 缓存与隐藏机制
┌─────────────────────────────────────────────────────────────┐
│ KeepAlive 组件 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ ┌──────────────────────────┐ │
│ │ cache (Map) │ │ storageContainer │ │
│ │ │ │ (隐藏的 div 容器) │ │
│ │ key → VNode │ │ │ │
│ │ key → VNode │ │ ┌──────────────────┐ │ │
│ │ key → VNode │ │ │ 被缓存的 DOM │ │ │
│ │ │ │ │ ┌──┐ ┌──┐ ┌──┐ │ │ │
│ └─────────────────┘ │ │ │A │ │B │ │C │ │ │ │
│ │ │ └──┘ └──┘ └──┘ │ │ │
│ ┌─────────────────┐ │ └──────────────────┘ │ │
│ │ keys (Set) │ │ │ │
│ │ │ └──────────────────────────┘ │
│ │ [A, B, C] │ │
│ │ ↑ LRU 顺序 │ │
│ └─────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
5.4 流程图解
首次渲染组件 A:
│
▼
┌─────────────────┐
│ 检查 cache │
│ 是否已有 A？ │
└────────┬────────┘
│ 否
▼
┌─────────────────┐
│ 正常创建组件 A │
│ 渲染 DOM │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 存入 cache │
│ A → VNode │
│ keys.add(A) │
└─────────────────┘
切换到组件 B:
│
▼
┌─────────────────┐
│ 组件 A 失活 │
│ (不是销毁!) │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 调用 _deActivate│
│ 将 A 的 DOM │
│ 移入隐藏容器 │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 渲染组件 B │
└─────────────────┘
切回组件 A:
│
▼
┌─────────────────┐
│ 检查 cache │
│ 是否已有 A？ │
└────────┬────────┘
│ 是
▼
┌─────────────────┐
│ 命中缓存！ │
│ 复用 VNode │
│ 复用组件实例 │
└────────┬────────┘
│
▼
┌─────────────────┐
│ 调用 _activate │
│ 将 A 的 DOM │
│ 从隐藏容器移出 │
│ 插入页面 │
└─────────────────┘
│
▼
┌─────────────────┐
│ 触发 onActivated│
└─────────────────┘
6. 源码深度解析
6.1 完整源码注释版
// packages/runtime-core/src/components/KeepAlive.ts
import {
type VNode,
type ComponentInternalInstance,
type SetupContext,
type RendererInternals,
type RendererElement,
type RendererNode,
ShapeFlags,
currentInstance,
unmountComponent,
callWithAsyncErrorHandling,
onBeforeUnmount,
type Slots,
type FunctionalComponent,
type Component,
type ComponentOptions,
type VNodeNormalizedChildren,
type VNodeChild,
setTransitionHooks,
type TransitionHooks,
} from "@vue/runtime-core";
export interface KeepAliveProps {
include?: MatchPattern;
exclude?: MatchPattern;
max?: number | string;
}
type MatchPattern = string | RegExp | (string | RegExp)[];
export const KeepAliveImpl: ComponentOptions = {
name: `KeepAlive`,
// 标记这是一个 KeepAlive 组件
__isKeepAlive: true,
props: {
include: [String, RegExp, Array] as PropType<MatchPattern>,
exclude: [String, RegExp, Array] as PropType<MatchPattern>,
max: [String, Number],
},
setup(props: KeepAliveProps, { slots }: SetupContext) {
// ==================== 1. 获取组件实例和渲染器方法 ====================
const instance = currentInstance!;
// 从组件实例中获取渲染器注入的方法
// move: 移动 DOM 节点
// createElement: 创建 DOM 元素
const { move, createElement } = instance.ctx.renderer as RendererInternals<
RendererNode,
RendererElement
>;
// ==================== 2. 创建存储容器 ====================
// storageContainer 是一个普通的 div，用于存放被失活的组件 DOM
const storageContainer = createElement("div");
// ==================== 3. 定义激活/失活方法 ====================
/**
* 失活组件：将组件的 DOM 移动到隐藏容器
* @param vnode 被失活的组件 VNode
* @param container 当前容器（未使用，保持一致性）
* @param anchor 锚点（未使用）
*/
instance.ctx.deactivate = (vnode: VNode) => {
move(vnode, storageContainer, null, MoveType.LEAVE);
};
/**
* 激活组件：将组件的 DOM 从隐藏容器移回页面
* @param vnode 被激活的组件 VNode
* @param container 目标容器
* @param anchor 锚点位置
* @param isSVG 是否是 SVG
* @param optimized 是否优化模式
*/
instance.ctx.activate = (
vnode: VNode,
container: RendererElement,
anchor: RendererNode | null,
isSVG: boolean,
optimized: boolean,
) => {
const vnodeComponent = vnode.component!;
// 将 DOM 移回页面
move(vnode, container, anchor, MoveType.ENTER, isSVG);
// 处理过渡动画
if (vnodeComponent.da) {
// 延迟激活（等待延迟显示动画完成）
queuePostRenderEffect(() => {
vnodeComponent.da!(vnodeComponent.vnode);
}, instance.suspense);
}
};
// ==================== 4. 缓存相关变量 ====================
const cache: Map<string, VNode> = new Map(); // 缓存容器：key -> VNode
const keys: Set<string> = new Set(); // 记录缓存顺序，用于 LRU
let current: VNode | null = null; // 当前正在渲染的组件
let pendingCacheKey: string | null = null; // 待缓存的 key
// ==================== 5. 缓存清理函数 ====================
/**
* 根据 key 淘汰缓存条目
* 当缓存超过 max 时，淘汰最久未使用的组件
*/
function pruneCacheEntry(key: string) {
const cached = cache.get(key);
if (!cached) return;
// 如果当前正在渲染的组件不是要淘汰的，触发 deactivated 钩子
if (current !== cached) {
const comp = cached.component!;
if (!comp.isDeactivated) {
// 调用 deactivated 生命周期钩子
callWithAsyncErrorHandling(
comp.type.deactivated,
comp,
ErrorCodes.COMPONENT_DEACTIVATED,
);
comp.isDeactivated = true;
}
}
// 从缓存中移除
cache.delete(key);
keys.delete(key);
}
/**
* 清空所有缓存
*/
function pruneCache() {
cache.forEach((cached, key) => {
pruneCacheEntry(key);
});
}
// ==================== 6. 监听 props 变化 ====================
// 当 include/exclude 变化时，清理不再匹配的缓存
watch(
() => [props.include, props.exclude],
([include, exclude]) => {
// 清理不再满足 include/exclude 条件的缓存
cache.forEach((vnode, key) => {
const name = getName(vnode);
if (
name &&
(!include || !matches(include, name)) &&
exclude &&
matches(exclude, name)
) {
pruneCacheEntry(key);
}
});
},
{ flush: "post", deep: true },
);
// ==================== 7. 组件卸载时清理 ====================
onBeforeUnmount(() => {
cache.forEach((vnode) => {
const { shapeFlag, component } = vnode;
// 如果组件还在激活状态，需要手动卸载
if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
unmountComponent(component!);
}
});
});
// ==================== 8. 核心渲染逻辑 ====================
return () => {
// 获取默认插槽的第一个子节点
const rawVNode = slots.default && slots.default();
// 如果没有子节点，直接返回
if (!rawVNode || rawVNode.length !== 1) {
if (__DEV__ && rawVNode && rawVNode.length > 1) {
warn(`KeepAlive should contain exactly one component child.`);
}
current = null;
return rawVNode;
}
// 获取内部真实组件（处理 Teleport 等包裹情况）
const vnode = getInnerChild(rawVNode[0]);
const comp = vnode.type as Component;
// 获取组件名称用于 include/exclude 匹配
const name = getName(vnode);
// 检查是否应该缓存
const shouldCache = !(
name &&
((props.include && !matches(props.include, name)) ||
(props.exclude && matches(props.exclude, name)))
);
// 获取缓存 key
const key = vnode.key == null ? comp : vnode.key;
const cachedVNode = cache.get(key);
// ==================== 8.1 命中缓存 ====================
if (cachedVNode) {
// 复用缓存的组件实例
vnode.component = cachedVNode.component;
vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE;
// 更新 LRU 顺序：先删除再添加，确保在 Set 末尾（最近使用）
keys.delete(key);
keys.add(key);
}
// ==================== 8.2 未命中缓存 ====================
else if (shouldCache) {
// 存入新缓存
cache.set(key, vnode);
keys.add(key);
// LRU 淘汰：如果超过 max，删除最久未使用的
if (props.max && keys.size > parseInt(props.max as string, 10)) {
pruneCacheEntry(keys.values().next().value);
}
}
// 标记组件需要被缓存（影响卸载流程）
vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE;
current = vnode;
return rawVNode;
};
},
};
// 辅助函数：获取组件名称
function getName(vnode: VNode): string | undefined {
return (
(vnode.type as ComponentOptions).name ||
(vnode.type as ComponentOptions).__name ||
(typeof vnode.type === "function" &&
(vnode.type as FunctionalComponent).name)
);
}
// 辅助函数：匹配模式
function matches(pattern: MatchPattern, name: string): boolean {
if (isArray(pattern)) {
return pattern.some((p) => matches(p, name));
} else if (isString(pattern)) {
return pattern.split(",").includes(name);
} else if (isRegExp(pattern)) {
return pattern.test(name);
}
return false;
}
6.2 关键逻辑解析
6.2.1 为什么使用 Map 和 Set？
const cache: Map<string, VNode> = new Map(); // 快速查找：O(1)
const keys: Set<string> = new Set(); // 保持插入顺序，支持 LRU
-
Map：提供 O(1) 的查找效率，适合频繁读取缓存
-
Set：保持插入顺序，且可以方便地获取"第一个"元素（最久未使用）
6.2.2 LRU 淘汰实现
// 更新 LRU 顺序
keys.delete(key); // 先删除旧位置
keys.add(key); // 再添加到末尾（最近使用）
// 淘汰最久未使用的
if (max && keys.size > max) {
pruneCacheEntry(keys.values().next().value); // 获取并删除第一个
}
6.2.3 渲染器如何配合 KeepAlive？
// packages/runtime-core/src/renderer.ts
// 在组件卸载流程中
function unmountComponent(instance) {
const { shapeFlag } = instance.vnode;
// 检查是否是 KeepAlive 缓存的组件
if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
// 不销毁，而是调用 deactivate
const { deactivate } = instance.parent?.ctx || {};
if (deactivate) {
deactivate(instance.vnode);
}
return;
}
// 普通组件：正常销毁流程
// ...
}
// 在组件挂载流程中
function mountComponent(vnode, container, anchor) {
// 检查是否来自缓存
if (vnode.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
// 复用已有实例，不需要重新创建
const instance = vnode.component;
// 调用 activate 将 DOM 移回页面
const { activate } = instance.parent?.ctx || {};
if (activate) {
activate(vnode, container, anchor);
}
return;
}
// 普通组件：正常创建流程
// ...
}
7. 实战应用场景
7.1 多标签页缓存
<template>
<div class="tabs">
<div
v-for="tab in tabs"
:key="tab.name"
class="tab-item"
:class="{ active: currentTab === tab.name }"
@click="currentTab = tab.name"
>
{{ tab.label }}
<span class="close" @click.stop="closeTab(tab.name)">×</span>
</div>
</div>
<div class="tab-content">
<KeepAlive :include="cachedTabs" :max="10">
<component :is="currentTabComponent" :key="currentTab" />
</KeepAlive>
</div>
</template>
<script setup>
import { ref, computed, watch } from "vue";
import UserList from "./UserList.vue";
import OrderList from "./OrderList.vue";
import Settings from "./Settings.vue";
const tabs = ref([
{ name: "UserList", label: "用户管理", component: UserList },
{ name: "OrderList", label: "订单管理", component: OrderList },
{ name: "Settings", label: "系统设置", component: Settings },
]);
const currentTab = ref("UserList");
const cachedTabs = ref(["UserList", "OrderList"]); // 只缓存特定标签
const currentTabComponent = computed(() => {
const tab = tabs.value.find((t) => t.name === currentTab.value);
return tab?.component;
});
function closeTab(tabName) {
// 关闭标签时从缓存列表移除
const index = cachedTabs.value.indexOf(tabName);
if (index > -1) {
cachedTabs.value.splice(index, 1);
}
// 切换到其他标签...
}
</script>
7.2 表单数据保持
<template>
<KeepAlive :include="['UserForm']">
<UserForm v-if="showForm" @submit="handleSubmit" />
<UserDetail v-else :user="currentUser" @edit="showForm = true" />
</KeepAlive>
</template>
<script setup>
import { ref } from "vue";
import UserForm from "./UserForm.vue";
import UserDetail from "./UserDetail.vue";
const showForm = ref(true);
const currentUser = ref(null);
function handleSubmit(userData) {
// 提交表单后切换到详情页
currentUser.value = userData;
showForm.value = false;
}
</script>
7.3 列表页状态保持
<!-- ListPage.vue -->
<template>
<div class="list-page">
<!-- 搜索条件 -->
<SearchForm v-model="searchParams" @search="handleSearch" />
<!-- 列表 -->
<div class="list-container" ref="listRef">
<div
v-for="item in listData"
:key="item.id"
class="list-item"
@click="goToDetail(item)"
>
{{ item.name }}
</div>
</div>
<!-- 分页 -->
<Pagination v-model:page="page" v-model:size="pageSize" :total="total" />
</div>
</template>
<script setup>
import { ref, onActivated, onDeactivated } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const listRef = ref(null);
// 状态数据
const searchParams = ref({});
const listData = ref([]);
const page = ref(1);
const pageSize = ref(20);
const total = ref(0);
const scrollTop = ref(0);
// 激活时恢复状态
onActivated(() => {
// 恢复滚动位置
if (listRef.value) {
listRef.value.scrollTop = scrollTop.value;
}
// 可选：刷新数据（如果需要保持最新）
// fetchData()
});
// 失活时保存状态
onDeactivated(() => {
if (listRef.value) {
scrollTop.value = listRef.value.scrollTop;
}
});
function goToDetail(item) {
router.push(`/detail/${item.id}`);
}
async function handleSearch() {
// 搜索逻辑...
}
</script>
8. 性能优化建议
8.1 合理设置 max
<!-- ❌ 不设置 max，可能无限增长导致内存泄漏 -->
<KeepAlive>
<component :is="currentTab" />
</KeepAlive>
<!-- ✅ 根据业务场景设置合理的 max -->
<KeepAlive :max="5">
<component :is="currentTab" />
</KeepAlive>
8.2 使用 include/exclude 精确控制
<!-- 只缓存必要的组件，减少内存占用 -->
<KeepAlive :include="['UserList', 'OrderList']" :max="5">
<component :is="currentTab" />
</KeepAlive>
8.3 避免缓存大型组件
<script setup>
// 对于包含大量数据或复杂图表的组件，考虑不缓存
defineOptions({
name: "HeavyDataChart", // 在 exclude 中排除
});
</script>
8.4 及时清理缓存
<script setup>
import { ref, nextTick } from "vue";
const includeList = ref(["TabA", "TabB", "TabC"]);
const currentTab = ref("TabA");
const keepAliveRef = ref(null);
// 方法1：通过修改 include 排除特定组件
function clearCache(componentName) {
const index = includeList.value.indexOf(componentName);
if (index > -1) {
includeList.value.splice(index, 1);
}
}
// 方法2：使用 v-if 强制重新创建 KeepAlive（清空所有缓存）
async function clearAllCache() {
keepAliveRef.value = false;
await nextTick();
keepAliveRef.value = true;
}
</script>
<template>
<KeepAlive v-if="keepAliveRef" :include="includeList">
<component :is="currentTab" />
</KeepAlive>
</template>
9. 常见问题与避坑指南
9.1 组件 name 未设置导致缓存失效
<script setup>
// ❌ 错误：没有设置 name，include/exclude 无法匹配
// 组件会被缓存，但无法通过 include/exclude 控制
// ✅ 正确：显式设置 name
defineOptions({
name: "MyComponent",
});
</script>
9.2 动态组件 key 问题
<template>
<!-- ❌ 错误：key 变化会导致缓存失效 -->
<KeepAlive>
<component :is="currentTab" :key="Date.now()" />
</KeepAlive>
<!-- ✅ 正确：使用稳定的 key 或组件名作为 key -->
<KeepAlive>
<component :is="currentTab" :key="currentTab" />
</KeepAlive>
</template>
9.3 异步组件的缓存
<script setup>
import { defineAsyncComponent } from "vue";
const AsyncComp = defineAsyncComponent(() => import("./AsyncComp.vue"));
</script>
<template>
<!-- ✅ 异步组件也可以被缓存 -->
<KeepAlive>
<AsyncComp />
</KeepAlive>
</template>
9.4 与 Transition 一起使用
<template>
<!-- ✅ KeepAlive 应该包裹在 Transition 内部 -->
<Transition name="fade" mode="out-in">
<KeepAlive>
<component :is="currentTab" />
</KeepAlive>
</Transition>
<!-- ❌ 不要这样：KeepAlive 包裹 Transition -->
</template>
9.5 缓存后数据不更新问题
<script setup>
import { onActivated, ref } from "vue";
const data = ref([]);
// ✅ 在 onActivated 中刷新数据
onActivated(() => {
// 组件从缓存激活时，重新获取最新数据
fetchLatestData();
});
// 或者使用 watch 监听路由参数变化
import { watch } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
watch(
() => route.params.id,
(newId) => {
if (newId) {
fetchData(newId);
}
},
{ immediate: true },
);
</script>
10. 总结与思考
10.1 核心要点回顾
| 要点 |
说明 |
| 缓存机制 |
使用 Map 存储 VNode，Set 管理 LRU 顺序 |
| 状态标记 |
COMPONENT_SHOULD_KEEP_ALIVE 和 COMPONENT_KEPT_ALIVE shapeFlag |
| 隐藏实现 |
通过 move 函数将 DOM 移入隐藏的 div 容器 |
| 生命周期 |
onActivated / onDeactivated 用于状态恢复和保存 |
| 淘汰策略 |
LRU 算法，当缓存超过 max 时淘汰最久未使用的组件 |
10.2 设计思想
KeepAlive 的设计体现了 Vue3 的几个重要思想：
-
声明式编程：开发者只需声明要缓存的组件，无需关心实现细节
-
可组合性：与动态组件、Transition、异步组件无缝配合
-
性能优先：LRU 策略防止内存无限增长，DOM 移动而非重建保证性能
-
扩展性：通过
include / exclude 提供精细的控制能力
10.3 思考题
-
为什么 KeepAlive 使用 DOM 移动而不是 display: none？
- 提示：考虑 CSS 样式继承、布局计算、内存占用等因素
-
如何实现一个自定义的缓存策略（如 FIFO）？
- 提示：研究 KeepAlive 的源码结构，尝试扩展
-
KeepAlive 与 Pinia/Vuex 状态管理如何配合？
- 思考：什么时候用 KeepAlive 缓存状态，什么时候用全局状态管理？
-
在 SSR 场景下，KeepAlive 会有什么问题？
📚 扩展阅读
- Vue3 官方文档 - KeepAlive
- Vue3 源码解读 - KeepAlive 实现
- LRU 缓存算法详解
- Vue3 渲染器原理
💡 如果本文对你有帮助，欢迎点赞、收藏、转发！有任何问题可以在评论区留言讨论。
登录
