插槽静态化是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 分析与代码生成逻辑：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 编译器扫描父组件模板中传入插槽的内容：若整个
<template v-slot:default>...</template>内部不含任何响应式绑定（如{{ msg }}、v-if、:class）、无指令、无表达式，仅含纯文本或静态标签，则标记为 静态插槽 - 生成代码时，静态插槽内容会被编译为一个 hoisted 常量 vnode 数组（类似
const _hoisted_1 = [createTextVNode("Hello")]） - 子组件的
renderSlot调用会直接返回该常量，跳过函数调用和 vnode 创建开销
如何写出可被静态化的插槽？
不是靠写法“声明”，而是靠内容“无副作用”。以下写法可触发静态化：
立即学习“前端免费学习笔记（深入）”；
- 父组件中使用显式
v-slot:default包裹纯静态结构：<template #default><h2>标题</h2><p>说明文字</p></template> - 避免在插槽模板中出现任何形式的绑定：
{{ }}、v-指令、:属性、@事件 - 不使用
<slot>的简写语法（如<Child>xxx</Child>），因其隐式生成的 slot 函数更难被判定为静态 - 具名插槽比默认插槽更容易被精准识别——显式命名 + 显式 template 更利于编译器分析边界
它如何减少重绘？
静态插槽本身不直接减少“重绘（repaint）”，但显著降低“重渲染（re-render）”引发的后续开销：
-
跳过 vnode 创建：不用每次调用
createVNode构建插槽内容节点 - 跳过 slot 函数执行：无需运行闭包函数、收集依赖、触发响应式追踪
- 缩小 diff 范围：Block Tree 中该插槽部分被视为稳定块，diff 算法跳过比对
- 避免子组件被动刷新：若子组件根节点被包裹在静态 block 中，父组件响应式更新不会导致其 VNode 树重建
