#Keep-Alive 原理与用法

#1. 面试题

Q: Keep-Alive 的作用是什么？include 和 exclude 是怎么匹配的？缓存淘汰策略是什么？

#2. 核心解答

Keep-Alive 是一个 Vue 内置的抽象组件。 它的主要作用是缓存不活动的组件实例，避免在切换路由或组件时频繁销毁和重建。

#(1) 适用场景

• Tab 切换：在 A, B, C 三个 Tab 间切换，保持之前的状态（如表单填写内容）。
• 列表详情页：从列表进详情再返回列表，列表应停留在刚才滚动的距离，不刷新数据。

#(2) 生命周期

被缓存的组件不会触发 created / mounted / unmounted。 它有专属的生命周期：

• activated: 组件被激活（进入）时调用。
• deactivated: 组件被停用（离开）时调用。

#(3) 配置参数

• include: 只有匹配 name 的组件才缓存 (字符串/正则/数组)。
• exclude: 匹配 name 的组件都不缓存。
• max: 最大缓存数量。

#(4) LRU 缓存策略 (核心算法)

Vue 在内部维护了一个 keys 数组和一个 cache 对象。 采用 LRU (Least Recently Used) 最近最少使用算法：

1. 命中缓存：将该 key 移到 keys 数组的最后（表示最近刚用过）。
2. 未命中且已满：销毁 keys 数组第一个组件（最早访问的，也就是最近最少使用的），然后放入新组件。

#3. 注意事项

• include 匹配的是什么？ 匹配的是组件选项中的 name 属性，不是路由的 name。如果要用 exclude，组件必须显式声明 name。
• 配合 Router:

  <!-- Vue 3 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>