Vue 3 通过“静态提升”机制智能识别并优化模板中完全静态的 VNode（即 Constant VNode）——这些节点在编译期即可确定、运行时永不变化，满足纯静态内容、无任何动态绑定、子树全静态、不含插槽/组件、不在动态上下文等严苛条件；编译器借助 transformHoist 插件递归判定并将其提升至渲染函数外部，生成带 /*#__PURE__*/ 标记的常量 VNode，显著减少重复创建开销，大幅提升渲染性能——哪怕一处微小动态性（如一个插值、一个指令或一个组件）都会导致整棵子树失去提升资格，凸显其优化的精准与严格。

Vue.js 编译器（尤其是 Vue 3 的 @vue/compiler-core）通过“静态提升”（Static Hoisting）机制，将**编译期可确定、运行时永不变化的 VNode 节点**标记为常量（isConstant），并提升到渲染函数外部，避免每次渲染重复创建，从而优化性能。

什么是 Constant VNode？

一个 VNode 被标记为 isConstant: true，意味着它满足以下全部条件：

• 节点类型是纯静态内容：如普通元素（
  hello
  ）、文本节点、注释节点；不含任何动态绑定（v-bind、:class、{{ }} 等）
• 子节点也全部是静态的（递归判断），且没有 v-if、v-for、v-once 等影响响应性的指令
• 不包含插槽、作用域插槽、组件（含自定义组件和内置组件如 ）
• 父级上下文不引入动态性（例如不在 v-for 内部或条件分支中）

编译器如何识别并标记静态 VNode？

在模板解析后的 AST 阶段，编译器执行 transformHoist 插件（位于 packages/compiler-core/src/transforms/hoist.ts），核心逻辑如下：

• 对每个 AST 节点调用 isStaticNode() 进行递归判定：检查指令、属性、插槽、子节点等是否全静态
• 若判定为静态，则打上 node.hoistable = true 标记，并收集到 hoists 数组
• 在生成渲染函数代码时，这些节点被提取为独立的常量变量（如 const _hoisted_1 = ...），并在 render 函数中直接引用
• 最终生成的 VNode 对象会携带 __v_isVNode: true 和 isStatic: true（内部字段，非公开 API），但更关键的是其创建逻辑被完全移出 render 函数体

实际效果与验证方式

以如下模板为例：

编译后生成类似：

其中 -1 是 PATCH_FLAGS.HOISTED，表示该节点已静态提升；/*#__PURE__*/ 提示打包工具可安全移除（无副作用）。

哪些情况会破坏静态性？

哪怕一处微小动态性，整棵子树都会失去提升资格：

• ...> → 属性绑定使根节点动态

• {{ msg }}

  → 插值表达式引入响应依赖
• Click → 自定义组件无法静态化
• ...
  → 指令导致条件性，即使 show 是常量也不行（编译器不执行运行时求值）
• once → v-once 节点虽不响应更新，但因需特殊处理，不参与静态提升

好了，本文到此结束，带大家了解了《Vue3静态VNode常数优化解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！