前端Wiki/词条/keep-alive 缓存

keep-alive 缓存

定义缓存不活动的组件实例，避免切换标签页时反复销毁重建丢失状态

默认情况下组件被切换走就会被销毁，回来时重建，表单填到一半的内容随之消失。keep-alive 是 Vue 内置的抽象组件，把其中的动态组件或 router-view 包起来后，不活动的组件只是被停用（触发 deactivated）而非卸载，再次显示时停用状态恢复（触发 activated），DOM 与数据都留在内存里。

它通过 include、exclude、max 三个属性控制缓存范围：按组件名做白名单或黑名单过滤，max 限制最多缓存多少个实例，超出按 LRU 算法淘汰。文档类、标签页类、分步表单场景非常合适，但详情页这种数据需要实时刷新的场景要谨慎，必要时在 activated 钩子里主动拉取最新数据。

用 include/exclude 按组件名精确控制缓存范围
max 限制缓存上限，超出自动淘汰最久未用的实例
需要实时数据的页面在 activated 钩子里重新请求

HTML

<template>
  <keep-alive include="UserList,OrderList" :max="10">
    <component :is="currentTab" />
  </keep-alive>
</template>

<script setup>
import { ref, onActivated } from 'vue';
const currentTab = ref('UserList');
onActivated(() => { console.log('从缓存中恢复了，可以刷新数据'); });
</script>

⚠ 常见误区

所有页面都缓存，导致内存占用持续增长且数据不更新
include 写成组件标签名而非 name 选项里的名字导致不匹配
在 activated 与 mounted 里重复发请求，造成接口浪费

🔗 相关词条组件与 props 生命周期