KeepAlive 在 Vue3 中有哪些新特性？defineOptions 与缓存配置实战

Vue 3.2+ 中 <keep-alive> 无新增 API，但配合 defineOptions（Vue 3.3+ 推荐）可更简洁语义化配置缓存；组件必须有稳定显式 name 才能被正确匹配缓存，defineOptions({ name: 'XXX' }) 是关键基础。

Vue 3.2+ 中的 <keep-alive> 本身没有新增 API，但配合 defineOptions（Vue 3.3+ 推荐语法）可以更简洁、更语义化地配置组件缓存行为，避免在 setup() 中手动处理 name 或响应式逻辑。

keep-alive 的核心机制没变，但配置方式更轻量

Vue 3 仍通过 <keep-alive> 包裹动态组件，靠组件的 name（或 __name）匹配 include/exclude。关键点是：

• 组件必须有明确的、**稳定且可匹配的 name**，否则无法被正确缓存
• 默认情况下，函数式组件、匿名组件、未显式命名的 defineComponent 组件会被跳过
• KeepAlive 是内置组件，不参与响应式系统，其 props（include/exclude/max）只在挂载时解析一次

defineOptions 让 name 和缓存元信息更清晰

在 `

// Vue 3.2 之前常见写法（冗余且分散）export default {  name: 'UserProfile',  setup() { ... }}

实战：用 defineOptions + 动态 include 实现路由级缓存

实际项目中常需按路由路径决定是否缓存。这时可结合 useRoute 和计算属性，再配合 defineOptions 确保组件名可用：

<script setup>import { useRoute } from 'vue-router'defineOptions({  name: 'ArticleDetail'})const route = useRoute()const isCacheable = computed(() => route.meta.keepAlive)</script>

然后在布局组件中：

<keep-alive :include="['ArticleDetail']">  <router-view v-slot="{ Component }">    <component :is="Component" v-if="Component" />  </router-view></keep-alive>

注意：include 值必须是字符串数组（或正则/逗号分隔字符串），不能是响应式引用 —— 所以通常用静态白名单，或配合 key 控制局部刷新。

容易忽略的细节：name 必须“可读取”且“不被混淆”

使用构建工具（如 Vite + Rollup）时，组件名可能被压缩或丢失。确保：

• 不依赖 __name 自动生成（它在生产环境可能为空）
• 禁用 build.minify: 'esbuild' 下的标识符混淆（或配置 minifyIdentifiers: false），否则 name 可能变成 a、b
• 调试时可通过 console.log(组件实例.$.type.name) 验证真实 name