Vue 3 的 Diff 算法通过 Block Tree 实现靶向定位，编译时将模板切分为动态块，仅更新标记区块，并结合 Patch Flag 进行查表式比对，使性能取决于动态节点数而非模板大小。
Vue 3 并不是靠“秒杀”赢的，而是把 Diff 算法从“全量扫描”变成“靶向定位”——Block Tree 是实现这一转变的核心机制。
Block Tree 让 Diff 不再遍历整棵树
传统 Diff（如 Vue 2）每次更新都要从根节点开始，递归比对整个虚拟 DOM 树，哪怕只改了一个文本，静态标题、导航栏、页脚这些完全不变的部分也得重新走一遍对比逻辑。
Block Tree 的做法是：在编译阶段就把模板按动态性切分成若干“块”（Block），每个块只包含真正可能变化的节点，以及它们的动态子节点。渲染时，Vue 只需更新那些被标记为“需要检查”的 Block，其余部分直接跳过。
- 静态内容（比如
<h1>欢迎页</h1>）被提升（hoist）成常量，在初始化时创建一次，后续复用 - 动态内容（比如
<p>{{ count }}</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11726" title="Springboot Vue Builder"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="Springboot Vue Builder" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11726" title="Springboot Vue Builder">Springboot Vue Builder</a> <p>从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。</p> </div> <a href="/xiazai/skill11726" title="Springboot Vue Builder" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>）被单独包裹进 Block，只在这个小范围内做 Diff - 一个组件里可以有多个 Block，彼此独立更新，互不影响
Patch Flag + Block Tree = 精准定位变更点
光有 Block 还不够，Vue 3 同时在编译时给每个动态节点打上 Patch Flag（补丁标志），比如 1 表示仅文本变化、2 表示 class 变化、8 表示 props 变化。这些标志和 Block 配合，让 runtime 的 Diff 操作变成“查表式更新”：
- 遇到
patchFlag: 1的节点，Diff 引擎只比对textContent，不检查 class、style、子节点 - 没有 Patch Flag 的节点，默认视为静态，直接跳过
- Block 内部的 Diff 不再是树形递归，而是一维数组比对，复杂度大幅下降
性能关系彻底反转：从“看模板大小”到“看动态节点数”
这是最根本的差异：
- Vue 2：组件模板越大，Diff 耗时越长；100 行模板中哪怕只有 1 行动态，也要处理全部 100 行
- Vue 3：Diff 耗时只取决于 Block 内动态节点的数量；模板再大，只要动态内容少，更新就快
- 实测场景：一个含 50 个静态 item 和 1 个动态计数器的列表，Vue 2 Diff 时间约 1.8ms，Vue 3 通常低于 0.2ms
不只是快，还更稳、更可预测
Block Tree 带来的不仅是性能提升，还有行为确定性增强：
- v-if / v-for 区域自动成块，分支切换不再引发整树重排
- Fragment 支持天然适配 Block 划分，多根节点不再需要无意义的包装 div
- 插槽（slot）内容是否更新，由其自身是否属于动态 Block 决定，避免 Vue 2 中父组件更新强制触发子组件重渲染的问题
不复杂但容易忽略：Block Tree 不是运行时猜测出来的，它依赖编译器的静态分析。所以写法会影响优化效果——比如带动态 key 的元素、使用 ref 或自定义指令的节点，就不会被提升，也就无法进入最优 Block 路径。
