Vue对自定义组件不进行全局Subtree深度递归diff,而是将其视为抽象边界,由组件实例自主管理子树更新:父组件仅比对props等输入并触发子组件update effect,子组件重新render后在其subTree上启动独立patch递归。

Vue.js 的 patch 流程中,对自定义组件(即用户定义的 <MyComponent>)并不会直接进行“Subtree 深度递归”式的逐节点 diff。相反,Vue 会将自定义组件视为一个**抽象边界(abstraction boundary)**,在 patch 阶段跳过其内部子树,转而交由该组件自身的实例和更新逻辑来管理。
组件节点不进入普通 VNode diff 递归
当 patch 过程遇到一个自定义组件的 VNode(vnode.type 是一个组件选项对象或 setup 函数),Vue 不会像处理普通元素(如 div、span)那样展开其 children 并递归 patch 子节点。而是:
- 调用
processComponent()(在 runtime-core 中)统一处理组件类型 VNode - 根据组件是否已挂载,走
updateComponent()或mountComponent() - 组件自身的更新由其内部的
instance.updateeffect 驱动,该 effect 调用组件的render()生成新的子树 VNode,再对其子树执行独立的 patch
子树更新由组件实例自主控制
所谓“Subtree 深度递归”,实际发生在组件实例内部,而非父组件 patch 的主流程中:
- 父组件 patch 到该组件 VNode 时,仅对比组件本身的 props、slots、ref 等输入,触发子组件的更新逻辑
- 子组件重新 render 得到新的子树 VNode 后,才在其
subTree上启动新一轮独立的 patch 递归(从根子节点开始) - 这个过程可嵌套多层:A → B → C,每层都只负责自己
subTree的 diff,形成逻辑隔离
关键机制:subTree 与 update 的分离
每个组件实例都有:
Vue 3 组合式 API 与 最佳实践,涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记(深入)”;
-
instance.subTree:上一次 render 返回的整个子树 VNode 树根 -
instance.update:一个响应式 effect,包裹了render()+patch(subTree, ...) - props 更新 → 触发 effect → 重新 render → 新旧
subTree进入标准 patch 流程
这意味着深度递归是**按组件粒度分段进行的**,不是跨组件连续穿透的“栈式深递归”,而是“事件驱动 + 分治式递归”。
特殊情况:异步组件与缓存组件
对于 <Suspense> 内的异步组件或 <KeepAlive> 缓存的组件,patch 行为进一步封装:
- 异步组件在 resolve 前只 patch 占位内容(fallback),resolve 后才真正挂载子组件并 patch 其 subTree
-
<KeepAlive>会复用已缓存的 instance 和 subTree,跳过 mount,仅在激活时触发instance.update - 这些逻辑都在
processComponent()的分支中处理,不改变“组件作为 patch 边界”的本质
因此,Vue 的设计刻意避免了全局深度递归,用组件实例作为更新单元,既保证响应式更新的精确性,也利于性能优化(如 shouldUpdate、memo、keep-alive 的介入)。理解这一点,有助于写出更符合 Vue 响应模型的组件逻辑。

















