patch算法仅同步执行dom差分更新，不参与调度；异步调度由响应式系统与scheduler协同完成，通过queuewatcher+nexttick驱动，确保render watcher在微任务中统一处理并最终触发patch。
Patch 算法本身不负责调度，它只做同步的 DOM 差分更新；真正的异步调度由响应式系统与 scheduler 协同完成。理解这一点，是理清 Vue 渲染流水线的关键。
Patch 是渲染的终点，不是调度的起点
Patch（即 vm.__patch__）接收新旧 VNode，输出真实 DOM 的最小变更。它全程同步执行，不等待、不排队、不感知 nextTick —— 它只响应上层传入的节点结构。
- 首次挂载时：prevVnode 为 null，直接调用 createElm 递归生成整棵 DOM 树
- 后续更新时：先经 sameVnode 判断是否可复用节点，再进入 patchVnode 和 updateChildren
- 所有 diff 逻辑（包括双端比对、key 查找、子节点移动）都在一次函数调用中完成，无异步分支
调度由 queueWatcher + nextTick 驱动
数据变化后，Vue 不会立刻 patch，而是把 render watcher 推入异步队列，等下一个微任务统一处理：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- queueWatcher 去重：同一组件在一轮事件循环中最多进队一次
- nextTick 封装 Promise.then / MutationObserver，确保队列在浏览器重绘前刷新
- flushSchedulerQueue 按父子顺序执行 watcher.run() → 触发 _render() → 生成新 VNode → 调用 _update() → 最终走到 __patch__
Vue 3 的 PatchFlag 让 diff 更靶向
编译阶段打上的 PatchFlag（如 TEXT=1、CLASS=2、PROPS=8）让运行时 patch 知道“该比什么”，跳过无关字段：
- 一个仅文本变化的
<p>{{ msg }}</p>，patch 时只更新textContent，不检查 class、style、事件或子节点 - 配合 Block Tree，diff 只遍历带 flag 的动态节点块，静态节点（标记 -1）完全跳过
- 这使原本 O(n) 的属性遍历降为 O(1) 的字段直取，尤其在复杂表单项中效果显著
动画钩子嵌入 patch 流程，但不阻塞它
insert、remove、postpatch 这类钩子由渲染器在 patch 的特定时机主动调用，但它们的执行与主流程解耦：
- insert 在节点挂载后、父节点 patch 完成前触发，适合启动入场动画
- remove 必须显式调用 done() 才继续卸载，为离场动画留出时间窗口
- 所有钩子都运行在 requestAnimationFrame 帧内，保证动画起始与浏览器刷新节奏对齐
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
