KeepAlive 缓存失效主因是include/exclude配置未生效，导致组件未进入缓存池；需确保组件显式声明name、匹配逻辑精确、避免运行时修改、注意exclude优先级及异步组件引用问题。
KeepAlive 缓存失效，通常不是组件没被缓存，而是 include 或 exclude 配置没生效，导致目标组件压根没进入缓存池。 这两个属性控制的是“哪些组件该被缓存”，配置错误会直接跳过缓存逻辑，看似失效，实则是“从未缓存”。下面从原理和实操两个层面拆解关键点。
include 和 exclude 的匹配逻辑必须精确
这两个属性只接受字符串数组、正则表达式或函数，且匹配的是组件的 name 选项（不是文件名、路由名或标签名）：
- 组件必须显式声明
name，比如export default { name: 'UserDetail' }；否则 Vue 会自动生成一个（如AnonymousComponent），无法稳定匹配 - 字符串匹配是全等判断，
include: ['UserDetail']不会匹配name: 'user-detail'或'UserDetailVue' - 正则需用字面量写法：
include: [/^User/]，不能写成字符串include: ['^User'] - 函数方式最灵活，但要注意 this 指向：函数接收组件实例（vnode.type）作为参数，返回布尔值
动态修改 include/exclude 不会触发已有缓存更新
这两个属性是初始化时读取一次的，后续响应式变化不会重新筛选已缓存的组件：
- 比如
:include="cachedNames"，后续 push 新 name 进数组，不会让新组件自动加入缓存，也不会清空旧缓存 - 若需运行时控制，建议配合
key强制重置 KeepAlive 内部状态，或用max限制数量 + 手动管理缓存生命周期 - 常见误操作：在路由守卫里改 include 数组，期望“按需缓存”，结果无效 —— 此时应换思路，比如用
v-if控制 KeepAlive 是否渲染
exclude 优先级高于 include，且支持通配符陷阱
当一个组件同时满足 include 和 exclude 条件时，exclude 生效，组件不被缓存。注意几个易错点：
-
exclude: ['*']会排除所有组件，包括你明确写在 include 里的 —— 因为通配符匹配优先级高，且不区分大小写 -
exclude: [/^A/]会排除所有name以 A 开头的组件，哪怕 include 里写了'AdminPage' - 调试技巧：在组件 mounted 钩子中打印
this.$vnode.component?.isCache（Vue 3）或检查keep-alive的_cache对象，确认组件是否真被纳入缓存
缓存命名空间冲突与异步组件问题
以下情况会让组件看似“缓存失效”，实则缓存了但没复用：
- 路由级组件使用异步 import，每次 import 返回新组件构造函数，
name虽相同，但组件引用不同 → KeepAlive 认为是不同组件，各自缓存一份 - 多个路由共用同一组件（如
User.vue同时用于 /user/1 和 /user/2），但未通过props或key区分状态 → 缓存复用导致视图错乱，误以为失效 - 解决方案：给 KeepAlive 加唯一
key（如:key="$route.fullPath"），或在组件内用beforeRouteUpdate主动更新数据
