vue3模板编译通过静态提升、patchflag标记和block tree三大核心优化提升性能：静态节点提升复用、动态节点精准标记、diff按块组织，实现运行时更轻、更准、更快。
Vue3 的模板编译不是简单地把 HTML 翻译成 JS，而是一场有预判、有取舍、有结构的工程实践。它在代码生成阶段就完成大量推理，让运行时更轻、更准、更快。
静态提升：让不变的节点“退休”
编译器会识别所有不依赖响应式数据的节点——比如纯文本、无动态属性的元素、静态 class 或 style——并把它们提取到 render 函数外部，只创建一次 VNode 实例。后续每次重新渲染，都直接复用这个引用。
- 减少内存分配：避免重复 new VNode 对象
- 降低 GC 压力：静态节点不再频繁进出堆内存
- 跳过 diff：patch 阶段可直接跳过整个静态子树
- 连续多个静态节点超过阈值（约 10 个）时，还会合并为一个字符串节点（createStaticVNode），进一步压缩虚拟 DOM 树规模
PatchFlag：给每个动态节点贴上“更新说明书”
PatchFlag 是一个位掩码数字，标记节点中哪些部分可能变化。编译器在生成 VNode 时就写入该字段，运行时 diff 就只检查对应位所代表的内容。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章