插槽静态化是Vue 3编译器对无响应式依赖插槽的优化：识别纯静态内容后提升为hoisted常量，跳过slot函数执行、vnode创建及diff比对，降低重渲染开销。

“插槽静态化”不是 Vue 官方术语，而是开发者对 Vue 3 编译器一项关键优化的通俗概括：当插槽内容**完全不依赖响应式状态**时，编译器会将其标记为静态，并在首次渲染后直接复用，避免每次 patch 都重新创建 vnode、执行 slot 函数、触发子组件内部 diff。

为什么插槽默认是“动态”的？

插槽本质是父组件向子组件“传递渲染逻辑”，而非传递最终 DOM。即使你写的是 <slot>Hello</slot>，Vue 编译器也无法在编译期断定父组件传入的内容是否稳定——因为实际内容由父组件的 slots.default 函数返回，而该函数可能引用了 props、data 或 computed。所以默认情况下：

• 所有 slots.xxx() 调用都保留在 Block 内部，随父组件更新而重执行
• 插槽内容无法被 hoistStatic 提升到 render 外层
• 只要用了插槽，子组件根 block 就难以被整体静态提升（哪怕子组件自身无响应式绑定）

Vue 3 如何识别并静态化插槽？

关键在编译阶段的 AST 分析与代码生成逻辑：

• 编译器扫描父组件模板中传入插槽的内容：若整个 <template v-slot:default>...</template> 内部不含任何响应式绑定（如 {{ msg }}、v-if、:class）、无指令、无表达式，仅含纯文本或静态标签，则标记为 静态插槽
• 生成代码时，静态插槽内容会被编译为一个 hoisted 常量 vnode 数组（类似 const _hoisted_1 = [createTextVNode("Hello")]）
• 子组件的 renderSlot 调用会直接返回该常量，跳过函数调用和 vnode 创建开销

如何写出可被静态化的插槽？

不是靠写法“声明”，而是靠内容“无副作用”。以下写法可触发静态化：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 父组件中使用显式 v-slot:default 包裹纯静态结构：<template><h2>标题</h2> <p>说明文字</p></template>
• 避免在插槽模板中出现任何形式的绑定：{{ }}、v- 指令、: 属性、@ 事件
• 不使用 <slot></slot> 的简写语法（如 <child>xxx</child>），因其隐式生成的 slot 函数更难被判定为静态
• 具名插槽比默认插槽更容易被精准识别——显式命名 + 显式 template 更利于编译器分析边界

它如何减少重绘？

静态插槽本身不直接减少“重绘（repaint）”，但显著降低“重渲染（re-render）”引发的后续开销：

• 跳过 vnode 创建：不用每次调用 createVNode 构建插槽内容节点
• 跳过 slot 函数执行：无需运行闭包函数、收集依赖、触发响应式追踪
• 缩小 diff 范围：Block Tree 中该插槽部分被视为稳定块，diff 算法跳过比对
• 避免子组件被动刷新：若子组件根节点被包裹在静态 block 中，父组件响应式更新不会导致其 VNode 树重建

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！