vue3通过静态提升与patch flags协同实现静态节点零参与diff：编译期提取固化静态vnode并复用，同时标记动态部分精准定位更新范围，使diff仅作用于真实变化节点。
Vue3 在 Diff 时忽略静态节点，不是“跳过检查”，而是**编译阶段就确认它永不变化，运行时直接不纳入对比范围**。这背后是静态提升（Static Hoisting）和补丁标记（Patch Flags）协同工作的结果——一个负责“提前提取”，一个负责“精准定位”，二者配合让 Diff 过程从“全量扫描”变成“只动真格的”。
静态提升：把不变的内容提前固化
Vue3 模板编译器在构建阶段就能识别出完全不依赖响应式数据的节点，比如纯文本、无绑定属性的标签、固定 class 的 div 等。这些内容会被提取出来，生成一次性的静态 vnode，并缓存在内存中。
- 例如：
<p>欢迎来到首页</p>编译后不会生成带响应式逻辑的 vnode，而是直接复用同一个对象 - 多次渲染时，这个
p节点的 vnode 引用始终相同，无需比对新旧是否一致 - 省去了创建、挂载、卸载、重用等一整套运行时开销
Patch Flags：告诉 Diff “哪些地方可能变”
动态部分会被打上细粒度标记，比如 TEXT（文本变化）、PROPS（属性更新）、CLASS（class 变化）等。Diff 过程只关注这些带标记的节点，其余一律跳过。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 例如：
<h1>{{ title }}</h1> <p>静态内容</p>→ 编译后h1带TEXT标记，p无标记 - 当
title更新，Diff 只检查h1的文本内容，p完全不参与任何比对逻辑 - 标记是编译期生成的常量，运行时零计算成本
为什么必须两者配合？单靠一个不行
只有静态提升，没有 Patch Flags，Diff 还得遍历所有 vnode 判断“这个是不是静态的”，反而增加判断开销；只有 Patch Flags，没有静态提升，静态 vnode 仍会重复创建，浪费内存与初始化时间。
- 静态提升解决的是“vnode 复用”问题——减少对象创建和 GC 压力
- Patch Flags 解决的是“Diff 范围”问题——缩小比对路径，避免无效循环
- 二者叠加，使 Diff 时间复杂度稳定在 O(n)，且 n 是“真正动态的节点数”，而非模板总节点数
实际影响：白屏与卡顿直降
在中大型项目中，一个典型页面模板里静态节点占比常超 60%。忽略它们意味着：
- 首屏渲染时，Diff 步骤减少近三分之二，白屏时间可压缩 300ms 以上
- 列表滚动或表单交互时，每次触发更新只处理绑定字段相关节点，交互响应更快
- 低端设备上 DOM 操作频次下降，重排重绘更少，页面更顺滑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
