Vue 教程：KeepAlive 的缓存策略与生命周期钩子详解

快速概述

KeepAlive 是 Vue 内置组件，用于缓存动态组件或路由组件的实例，避免重复渲染，提升性能。它适用于列表页返回保持滚动位置、表单暂存等场景。前置环境：Vue 3.x 项目，需了解组件与路由基本用法。

核心概念与原理

KeepAlive 通过缓存组件实例，在切换时保留状态。其核心是 include、exclude 属性控制缓存范围，max 限制缓存数量。被缓存组件会触发 activated 和 deactivated 钩子，分别对应激活与失活。

实战步骤与代码

1. 创建 Vue 项目（如 vue create my-app）。
2. 在路由视图外层包裹 <KeepAlive>。

<template>
  <KeepAlive include="ListPage">
    <router-view />
  </KeepAlive>
</template>
<script setup> // 在组件中定义钩子 import { onActivated, onDeactivated } from 'vue'; onActivated(() => { console.log('组件被激活'); }); onDeactivated(() => { console.log('组件被缓存'); }); </script>

配置 max 限制缓存数量，避免内存占用过高。

常见坑点与优化

• 坑点：缓存过多导致内存泄漏，需设置 max 或动态清理。
• 坑点：include 匹配组件名，若使用匿名组件则失效。
• 优化：结合 keep-alive 与路由 meta 字段，按需缓存。

通过合理配置，KeepAlive 能显著减少渲染开销，提升交互流畅度。