Vue keep-alive 深度解析：LRU 缓存机制与源码实现剖析

在Vue开发中，keep-alive组件通过缓存机制显著提升用户体验，但很多开发者对其底层LRU淘汰策略并不了解。本文将深入解析这一关键技术原理。

---

前言

keep-alive 组件作为Vue开发中的常用功能，通过包裹实现组件状态保留。但长期使用后，开发者往往会产生疑问：当设置max属性后，Vue如何决定淘汰哪个组件？通过源码分析可以发现，其核心采用了一种经典数据结构策略——LRU（最近最少使用）算法。

---

一、LRU策略核心原理

当缓存空间不足时，优先淘汰最久未被访问的缓存项。以max=3为例：

该策略基于最近使用的数据更可能被再次访问的假设，广泛应用于操作系统页面置换、Redis缓存等场景，Vue的keep-alive同样采用这一思路。

---

二、keep-alive使用详解

2.1 核心配置属性

属性	类型	功能
include	字符串/正则/数组	指定需要缓存的组件
exclude	字符串/正则/数组	排除不需要缓存的组件
max	数字	最大缓存组件实例数

2.2 基础应用：缓存动态组件

<keep-alive>
  <component :is="currentView">component>
keep-alive>

组件切换时保留原有状态，再次访问时直接恢复，避免重复渲染。

2.3 精准控制：include与exclude

实际项目中需针对性地缓存组件，例如表单提交页通常不需要缓存：

<keep-alive include="UserList,UserDetail" exclude="SearchResult">
  <component :is="currentView">component>
keep-alive>

支持正则表达式匹配：

<keep-alive :include="/^User/">
  <component :is="currentView">component>
keep-alive>

注意：匹配依据是组件的name选项而非路由名称，确保组件明确定义name属性：

export default {
  name: 'UserList',
  // 其他配置...
}

2.4 启用LRU：max属性配置

<keep-alive :max="10">
  <router-view />
keep-alive>

设置max后激活LRU策略，超出数量时自动淘汰最久未访问组件。

重要建议：必须设置max参数，避免内存持续增长导致性能下降。

2.5 与Vue Router集成方案

Vue 2与Vue 3存在语法差异：

<router-view v-slot="{ Component }">
  <keep-alive :include="cachedViews" :max="15">
    <component :is="Component" />
  keep-alive>
router-view>

结合状态管理实现动态缓存控制：

export const useCacheStore = defineStore('cache', () => {
  const cachedViews = ref([])
  function addView(view) {
    if (!cachedViews.value.includes(view)) {
      cachedViews.value.push(view)
    }
  }
  // 其他操作方法...
})

---

三、LRU实现机制解析

3.1 缓存内容本质

keep-alive实际缓存的是VNode及其关联的组件实例，而非DOM元素。通过保留VNode引用，实现以下状态持久化：

1. 响应式数据（data）
2. 计算属性（computed）
3. 侦听器（watch）
4. DOM结构
5. 子组件树

3.2 版本实现对比

特性	Vue 2	Vue 3
缓存容器	纯对象	Map
访问记录	数组	Set
性能优化	O(n)	O(1)

3.3 核心数据结构

const cache = new Map()
const keys = new Set()

其中cache存储VNode实例，keys维护访问顺序。

3.4 关键流程解析

3.5 源码核心逻辑

缓存命中处理

if (cache.has(key)) {
  const cached = cache.get(key)
  keys.delete(key)
  keys.add(key)
}

通过删除后重新添加操作，将key移至Set末尾标记为最近使用。

缓存淘汰机制

if (max && keys.size > parseInt(max)) {
  const oldestKey = keys.values().next().value
  keys.delete(oldestKey)
  cache.delete(oldestKey)
}

获取Set首个元素即为最久未使用的缓存key。

组件卸载劫持

if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
  deactivate(vnode)
}

实际执行：

1. 移除DOM但不销毁实例
2. 保留完整组件状态
3. 触发deactivated钩子

---

四、专属生命周期应用

被缓存的组件拥有两个特有生命周期钩子：

activated - 组件激活时

典型应用场景：

1. 数据刷新
2. 定时器启动
3. 滚动位置恢复

deactivated - 组件停用时

典型应用场景：

1. 资源释放
2. 状态保存
3. 请求取消

---

五、常见问题解决方案

Q1: 如何强制刷新缓存组件？

A：通过activated钩子主动更新数据。

Q2: 特定路由如何跳过缓存？

A：三种实现方式：

1. 配置exclude属性
2. 动态管理include列表
3. 手动清除缓存

Q3: 与transition组件配合注意事项

A：保持外层transition嵌套结构：

<transition>
  <keep-alive>
    <router-view />
  keep-alive>
transition>

---

六、核心要点总结

关键点	说明
缓存对象	VNode及组件实例
淘汰算法	LRU策略
数据结构	Vue3采用Map+Set
必备配置	max参数与name属性

掌握keep-alive的LRU实现机制，能够帮助开发者更高效地管理组件缓存，在提升用户体验的同时避免内存泄漏风险。