Vue.js 中不存在名为“BlockTree”的官方概念或机制,KeepAlive 缓存逻辑仅依赖 VNode 的 type、key 及 include/exclude 等公开配置,内部私有字段如 vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE 由框架自动管理,开发者不应直接操作。

Vue.js 中并没有官方概念叫 BlockTree,也不存在名为 “BlockTree” 的内置机制用于对 KeepAlive 缓存的 VNode 做特殊标记。
KeepAlive 的缓存逻辑基于 VNode 的 key 和 type
<keepalive></keepalive> 是 Vue 3 的内置组件,其缓存行为依赖于以下核心判断:
- VNode 的
type(组件定义对象)是否相同 —— 决定是否复用同一缓存槽位 - VNode 的
key是否存在且稳定 —— 若无 key,KeepAlive会自动生成一个基于组件名 + 组件实例唯一 id 的 key;有显式 key 则优先使用 - 组件是否满足缓存条件(如未被
include/exclude过滤,未调用deactivated后主动unmount等)
所谓“特殊标记”实际是 VNode 上的内部属性
Vue 在内部确实会给被 KeepAlive 包裹的组件 VNode 添加一些私有字段,但这些不是用户需操作或依赖的公开 API:
-
vnode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE:标识该 VNode 对应的组件应被KeepAlive处理 -
vnode.keepAliveInstance:指向所属KeepAlive实例的引用(仅在 dev 模式或调试时可见) -
vnode.component?.isDeactivated === true:表示当前组件实例处于缓存态(即已触发deactivated钩子)
这些字段由 Vue 运行时自动设置,开发者不应直接读写或依赖它们做业务逻辑判断。
立即学习“前端免费学习笔记(深入)”;
正确控制缓存行为的方式
若想精准管理组件缓存,应使用公开、稳定的接口:
- 为需要独立缓存的同组件不同实例,显式设置唯一
key:<keepalive><mycomp :key="id"></mycomp></keepalive> - 利用
include/excludeprop 控制哪些组件名/正则/函数匹配的组件参与缓存 - 在组件内使用
onActivated/onDeactivated钩子响应缓存生命周期 - 调用
KeepAlive实例的include/exclude动态更新(需 ref 获取实例,较罕见)
没有 BlockTree,也没有需要手动打标的场景。Vue 的缓存机制是隐式、声明式且封装良好的。


















