Vue中keep-alive缓存失效是怎么回事？

篷蔚提问于 2026-03-13 08:01:19 阅读 2

框架

我在用 keep-alive 包裹动态组件时，发现切换路由后组件还是重新渲染了，缓存没生效。明明加了 include，但每次进去都走 created 钩子，这不对啊？

我的写法大概是这样的：

<keep-alive :include="['UserProfile']">
  <component :is="currentComponent" />
</keep-alive>

组件名也确认是 UserProfile，name 选项也写了，但就是不缓存，到底哪里出问题了？

Vue3 状态管理

我来解答赞 12 收藏

反馈

1 条解答

西门成立 Lv1

这个问题我遇到过，基本就几个原因：

最可能的问题：组件名匹配不上

Vue 的 keep-alive 是根据组件的 name 选项来匹配的，不是根据你在 data 里定义的变量名。你确认组件内部是这样写的吗：

export default {

  name: 'UserProfile'

  // 必须是这个 name，字母大小写要对上

}

如果不确定，可以在组件里加个 console.log(this.$options.name) 打印出来看看。

第二个常见坑：动态组件的 key

如果你写了这样的：

<component :is="currentComponent" :key="someDynamicValue" />

只要 key 变了，Vue 就会把这个组件当作新的实例，缓存直接失效。检查一下有没有在哪里给 component 加了 key。

第三个可能：v-if 条件

如果外层用了 v-if 变成 false，组件被销毁了，再切回来也是重新创建，不是缓存问题。

排查建议：

把 include 去掉，先试下不限制缓存范围，看能不能生效。如果能生效，那就是名字匹配的问题。如果本身就不生效，检查下是否有 key 或者 v-if 在搞鬼。

还有一个小细节：如果用了路由跳转而非动态组件切换，keep-alive 包裹的方式可能需要调整，这种情况下建议用路由的 meta 字段来控制缓存。

2026-03-13 08:05