Vue 3静态提升基于严谨的静态语义判定，编译期通过getConstantType逐层推导节点常量性，仅≥CAN_CACHE（2）才提升；支持整节点与静态属性分离提升，v-for/v-if因结构不固定或条件不确定被禁止提升。
Vue 3 的静态提升（Static Hoisting）不是靠启发式猜测，而是有一套严谨、可验证的静态语义判定逻辑。它发生在编译阶段（即 @vue/compiler-dom 处理 AST 时），核心目标是：**识别出在整个组件生命周期内绝对不变的节点或属性，并将其提前创建、缓存、复用**。能否被提升，不取决于“看起来静不静态”，而取决于编译器对节点常量性（constancy）的逐层推导。
静态节点的判定依据：getConstantType 函数
Vue 编译器使用 getConstantType(node)（定义在 packages/compiler-core/src/transforms/hoistStatic.ts）来量化一个节点的“静态程度”。它返回一个数字（ConstantTypes 枚举值），关键阈值是：≥ ConstantTypes.CAN_CACHE（值为 2）才允许被提升。
该函数会递归检查节点及其所有子节点、属性、事件绑定等，综合判断是否满足以下全部条件：
- 节点类型为普通元素（
Element）或纯文本（Text），且非组件、v-for、v-if、v-slot等动态容器 - 节点不含任何插值（
{{ }}）、指令（v-开头）、动态 prop（如:id、:class）、动态事件（@click） - 节点的所有属性值本身也必须是常量：比如
class="btn"✅，:class="cls"❌；style="color:red"✅，:style="{ color }"❌ - 子节点树整体为静态：若父节点想被提升，其所有直接子节点（包括文本、元素）都必须满足静态条件；哪怕一个子节点含
{{ msg }}，整个父节点就失去提升资格
属性也能单独提升：props 分离优化
静态提升不仅作用于完整节点，还支持细粒度的 静态属性提取。这是很多人忽略的关键点。
立即学习“前端免费学习笔记（深入）”；
例如这个模板：
<div :id="dynamicId" class="container" data-role="main">{{ content }}</div>
虽然整个 <div> 因含 {{ content }} 和 :id 无法被整体提升，但它的 class 和 data-role 是静态的。编译器会：
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 提取静态 props 对象：
const _hoisted_1 = { class: "container", "data-role": "main" } - 在 render 函数中合并使用：
_createVNode("div", _mergeProps({ id: _ctx.dynamicId }, _hoisted_1), ...)
这种分离策略大幅减少了 _mergeProps 的运行时开销，也避免了每次渲染都构造新对象。
为什么 v-for / v-if 节点一定不能提升？
源码中明确禁止提升带有 v-for 或 v-if 的节点（见 hoistStatic.ts 中 isSingleElementRoot 和 walk 的 doNotHoistNode 标志）。原因很本质：
-
v-for节点在运行时可能生成零个、一个或多个 VNode，结构不固定 → 违反“完全静态”的前提 -
v-if节点存在条件分支，渲染结果依赖响应式状态 → 其存在性本身就不确定，更谈不上“缓存复用” - 即使
v-if内部全是静态内容（如<div v-if="false"><h2>标题</h2></div>），编译器也不会提升它——因为提升后无法参与条件控制逻辑
提升后的代码长什么样？看真实编译输出
以这段模板为例：
<template><br> <div class="layout"><br> <header><h1>Dashboard</h1></header><br> <main>{{ msg }}</main><br> </div><br></template>
编译后关键片段如下：
// 提升的静态子树（整个 <header>）<br>const _hoisted_1 = /*#__PURE__*/_createVNode("header", null, [<br> _createVNode("h1", null, "Dashboard")<br>], -1 /* HOISTED */)<br><br>// 渲染函数中直接复用<br>function render() {<br> return (_openBlock(), _createBlock("div", { class: "layout" }, [<br> _hoisted_1, // ← 不再调用 _createVNode<br> _createVNode("main", null, _toDisplayString(_ctx.msg), 1 /* TEXT */) // ← 仅此处动态<br> ]))<br>}
注意 -1 /* HOISTED */ 这个 patchFlag，它告诉运行时：这个 VNode 是编译期生成的常量，diff 阶段可完全跳过比对。
