Vue 组件缓存与 KeepAlive：优化动态组件切换性能

快速概述

在 Vue 3 应用中，动态组件切换（如使用 <component :is> 或路由视图）时，每次切换都会销毁旧组件并创建新组件，导致状态丢失和重复渲染开销。KeepAlive 是 Vue 内置组件，用于缓存非活动组件实例，避免重复创建，从而显著提升切换性能。它适用于需要保留表单输入、滚动位置或高频切换视图的场景。前置环境要求：Vue 3.x 项目（Vue 2 已于 2023 年 12 月 31 日停止维护，建议升级）。

核心概念与原理

KeepAlive 的核心机制是缓存组件实例。当组件被切换离开时，KeepAlive 不会销毁它，而是将其实例缓存起来；当再次切换回来时，直接复用缓存的实例，跳过创建和挂载过程。这依赖于 Vue 的虚拟 DOM 和组件实例生命周期。被缓存的组件会触发 activated 和 deactivated 钩子，而 mounted 和 unmounted 只在首次创建和真正销毁时触发。KeepAlive 支持通过 include 和 exclude 属性按组件名称进行条件缓存，也支持 max 属性限制缓存实例数量，实现 LRU 淘汰策略。

实战步骤与代码

步骤 1：基础用法

在动态组件外层包裹 <KeepAlive>，即可启用缓存。

<template>
  <KeepAlive>
    <component :is="currentView" />
  </KeepAlive>
</template>
<script setup> import { ref } from 'vue' import TabA from './TabA.vue' import TabB from './TabB.vue'
const currentView = ref(TabA) </script>

此时切换 currentView 时，TabA 和 TabB 的实例会被缓存，状态得以保留。

步骤 2：条件缓存与限制数量

使用 include 和 exclude 控制哪些组件被缓存，使用 max 限制缓存数量。

<KeepAlive :include="['TabA']" :max="5">
  <component :is="currentView" />
</KeepAlive>

上述配置仅缓存名为 TabA 的组件，最多缓存 5 个实例，超出后按 LRU 策略淘汰最久未使用的实例。

步骤 3：监听激活状态

在组件内部使用 onActivated 和 onDeactivated 钩子，处理缓存激活时的逻辑（如刷新数据）。

<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => { // 组件被缓存后重新激活时调用 console.log('组件被激活') })
onDeactivated(() => { // 组件被缓存但离开视图时调用 console.log('组件被缓存') }) </script>

常见坑点与优化

• 组件名称匹配问题：include 和 exclude 匹配的是组件注册名称，若使用 <script setup> 需显式定义 name 选项，否则匹配可能失效。
• 缓存导致状态过期：缓存组件不会重新执行 mounted，若依赖实时数据，应在 onActivated 中重新拉取。
• 内存占用：缓存大量组件会占用内存，合理设置 max 并避免缓存大型非必要组件。
• 与路由结合：在 <router-view> 外层包裹 KeepAlive 时，需注意路由组件名称定义，且结合 meta 字段动态配置 include，实现按需缓存。

性能优化建议：优先缓存状态频繁变化且创建开销大的组件；对静态内容组件无需缓存；使用 max 限制缓存池大小，平衡内存与性能。