vue 3 的 block tree 通过编译期切块与运行时跳过实现精准局部更新：block 是共享响应式依赖的逻辑单元，dynamicchildren 数组仅包含需比对的动态节点，静态内容被提升复用；patch flag 标识具体更新动作，使 diff 退化为一维遍历，复杂度降至 o(m)。
Vue 3 的 Block Tree 实现精准局部更新，核心在于把“哪些节点会变”和“怎么变”这两件事提前在编译阶段定下来，运行时不再猜测、只执行。
Block 是最小更新单元，不是节点而是作用域
一个 Block 不对应某个 DOM 元素，而是一组共享相同响应式依赖的动态节点组成的逻辑单元。比如：{{ msg }} 和 :class="cls" 如果都依赖同一个 ref，它们会被编译进同一个 Block；如果依赖不同变量，就会分到相邻但独立的 Block 中。每个 Block 在运行时挂载 dynamicChildren 数组，只存真正需要比对的子节点，静态内容（如纯文本、无绑定的 div）被提升复用，根本不出现在 diff 流程里。
编译期切块 + 运行时跳过，两级精简
传统 diff 要从根开始逐层遍历整棵树，而 Block Tree 把这个过程压缩成两步跳过：
- 第一层跳过：静态节点在组件初始化时就创建好并缓存，后续渲染直接复用，完全不进入 patch 流程
- 第二层跳过：进入 Block 后，不递归遍历所有 children，而是直接读取
dynamicChildren数组，只对其中带 Patch Flag 的节点做更新
例如：<div v-if="show">
<h2>标题</h2>
<p>{{ msg }}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5039" title="check-vue-style"><img
src="https://img.php.cn/upload/skill/000/000/081/179032142844293.jpg" alt="check-vue-style" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5039" title="check-vue-style" class="overflowclass">check-vue-style</a>
<p class="overflowclass">检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5039" title="check-vue-style" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div> 中，<h2></h2> 被提升为常量，<p></p> 进入 dynamicChildren —— 后续更新只处理它，<h2></h2> 连比对都不参与。
Patch Flag 明确更新动作，查表式执行
每个动态节点在编译时被打上数字标记（Patch Flag），比如：
-
1表示仅文本变化 → 运行时只比对textContent -
2表示 class 变化 → 只更新className属性 -
8表示 props 变化 → 只比对 props，不触发子节点 diff
Block 提供“范围”，Patch Flag 提供“动作”。两者配合，diff 退化为一维数组遍历，复杂度从 O(n) 降至 O(m)，m 是动态节点数，与模板总大小无关。
插槽与 v-memo 进一步细化更新边界
插槽天然构成动态边界：<slot></slot> 本身会被划为独立 Block，父组件传入的内容按自身依赖单独更新，不影响子组件其他区域。配合 v-memo，还能在插槽内部显式声明缓存条件，比如 <div v-memo="[item.id]>{{ item.name }}</div>，让更新粒度精确到单个列表项，避免因父组件其他状态变化误触发重渲染。
