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 主动更新数据