静态节点提升做了什么
Vue 3 在编译时优化中的 静态节点提升（Static Node Hoisting） 是一项核心性能优化策略，它的核心目标是通过 减少运行时虚拟 DOM 的创建和比对开销 来提升渲染性能。以下是其工作原理和具体作用：
1. 什么是静态节点？
静态节点是指模板中 内容不会随状态变化而改变的部分。例如：
<div>
<h1>Static Title</h1> <!-- 静态节点 -->
<p>{{ dynamicText }}</p> <!-- 动态节点 -->
</div>
-
h1标签的内容固定，无绑定数据或指令，属于静态节点。 -
p标签的内容依赖dynamicText变量，属于动态节点。
2. 静态节点提升做了什么？
在 Vue 3 的编译阶段，模板编译器（如 @vue/compiler-dom）会分析模板，将静态节点提取为常量，避免在每次组件渲染时重复创建它们的虚拟 DOM。具体优化步骤：
(1) 标记静态节点
编译器遍历模板的 AST（抽象语法树），识别出所有 无动态绑定 的节点（包括其子节点），标记为静态。
(2) 生成提升代码
将静态节点转换为 常量（hoisted nodes），存储在组件的渲染函数外部。例如：
// 编译后的代码示例
const _hoisted_1 = /*#__PURE__*/ createVNode("h1", null, "Static Title");
function render() {
return (openBlock(), createBlock("div", null, [
_hoisted_1, // 直接复用静态节点
createVNode("p", null, dynamicText)
]))
}
(3) 复用静态节点
在组件多次渲染时，静态节点对应的虚拟 DOM 对象 只创建一次，后续直接复用，无需重新生成或进行 Diff 比对。
3. 优化效果
静态节点提升通过以下方式显著提升性能：
-
减少虚拟 DOM 创建开销
静态节点仅在初始化时生成一次，后续渲染跳过重复创建。 -
跳过 Diff 比对
虚拟 DOM 的 Diff 算法会直接忽略静态节点，减少计算量。 -
降低内存占用
静态节点的虚拟 DOM 对象全局复用，避免重复内存分配。
4. 对比 Vue 2
在 Vue 2 中，即使节点是静态的，每次渲染仍会生成新的虚拟 DOM，并进行全量 Diff 比对：
// Vue 2 的渲染逻辑（伪代码）
function render() {
return createElement("div", [
createElement("h1", {}, "Static Title"), // 每次渲染都重新创建
createElement("p", {}, this.dynamicText)
])
}
Vue 3 的静态节点提升彻底解决了这一问题。
5. 实际场景示例
假设一个页面包含大量静态内容（如页眉、页脚、固定排版）：
-
未优化：每次渲染需创建所有节点的虚拟 DOM，并进行全量 Diff。
-
优化后：静态内容仅在初始化时创建一次，后续渲染完全跳过这些节点。
6. 配合其他编译优化
静态节点提升通常与其他编译优化协同工作，例如：
-
静态属性提升：将静态属性（如
class="container"）提取为常量。 -
动态标记（Patch Flags）：在动态节点上标记需要比对的属性类型（如文本、类名、样式），进一步细化 Diff 过程。
总结
静态节点提升是 Vue 3 编译时优化的核心机制之一，它通过 将静态内容提取为常量并复用，避免了不必要的虚拟 DOM 操作，显著提升了渲染性能。对于包含大量静态内容的页面，这一优化可带来数倍的性能提升。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
