靶向更新是Vue3通过编译时标记patchFlags（如TEXT=1、CLASS=2）并运行时按位运算精准定位需更新字段，跳过静态节点与未改动属性，结合Block Tree批量处理dynamicChildren，实现确定性、零冗余的高效DOM更新。
“靶向更新”是 Vue3 渲染机制的核心优化策略，它不是泛泛地比对整个 VNode 树，而是只聚焦于真正变化的节点及其具体字段，跳过所有静态或未改动的部分。本质是编译时标记 + 运行时按位分流，让 patch 流程从“猜哪里变了”变成“直接知道该更新什么”。
编译时打标：PatchFlag 是动态性的身份证
Vue3 编译器在解析模板时，会逐个分析节点是否依赖响应式数据：
-
纯静态节点（如
<h1>标题</h1>）不打任何标记，后续永不参与 diff -
仅文本变化（如
<p>{{ msg }}</p>）被打上PATCH_TEXT = 1 -
仅 class 变化（如
<div :class="cls">）被打上PATCH_CLASS = 2 -
多个动态项共存（如
<div :class="cls" :style="s" @click="h">{{ msg }}</div>）标记为1 | 2 | 8 = 11（二进制1011）
这个数字会被写入 VNode 的 patchFlag 字段，成为运行时决策的唯一依据。
运行时分流：位运算决定“只做哪几件事”
当响应式数据变更触发重新 render 后，新旧 VNode 进入 patch 阶段。此时不再遍历 props 或 children 对象，而是直接查 flag：
立即学习“前端免费学习笔记（深入）”；
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 若
newVNode.patchFlag & TEXT为真 → 仅比对newVNode.children和oldVNode.children的文本内容 - 若
newVNode.patchFlag & CLASS为真 → 仅浅比较newVNode.props.class与oldVNode.props.class - 未置位的字段（如
style、key、ref）完全跳过，连属性名都不读取
整个过程不依赖 for-in、Object.keys 或深度递归，一次按位与操作即可定位行为分支，耗时在纳秒级。
Block Tree 结构：让动态节点聚合成可批量调度的单元
Vue3 不再把 VNode 当作孤立对象处理，而是构建了 Block（块）结构：
- 每个 Block 是一个函数作用域，内部包含若干子 VNode
- 编译器把所有带
patchFlag的动态节点收集到 Block 的dynamicChildren数组中 - 更新时，只遍历
dynamicChildren，忽略 Block 内所有静态子节点
这相当于把“哪些节点要动”提前打包成清单，运行时无需现场判断——既减少判断开销，又提升 cache 局部性。
和 Vue2 全量 diff 的关键区别
Vue2 的 patch 是通用型：不管节点有没有变，都得走一遍 props diff、children diff、事件比对等完整流程；而 Vue3 的靶向更新是契约型：编译阶段已签好“本次只改文本和 class”，运行时就严格履约，不做一丁点多余动作。
这不是算法层面的改进，而是用编译期信息把不确定性转化为确定性——让 CPU 少做选择，多做执行。
