Vue插槽编译核心是将<slot>和v-slot静态分析为$slots对象中的函数，父组件内容编译为带词法作用域的渲染函数，运行时通过_renderSlot动态调用并传入作用域参数，后备内容由编译器静态判断，v-if需包裹插槽而非直接使用。
Vue.js 编译器处理插槽渲染，核心是把模板中的 <slot> 和 v-slot 在编译阶段转成可执行的渲染函数，而不是直接生成 DOM 节点。这个过程不依赖运行时判断，而是靠静态分析 + 函数化封装来保证灵活性和响应性。
插槽定义被编译为 $slots 对象
子组件模板里的每个 <slot> 都会被识别并归类：
-
<slot></slot>→ 对应$slots.default -
<slot name="header"></slot>→ 对应$slots.header -
<slot :item="item" :index="idx"></slot>→ 标记为作用域插槽，收集绑定字段item、idx，最终挂载为$slots.item（一个接收参数的函数）
这些插槽入口统一组织成 $slots 对象，在组件实例初始化时就准备就绪。
父组件插槽内容被编译成带参函数
父组件中写的 <template #header>{{ title }}</template> 不会立刻渲染，而是被编译为类似这样的函数：
header: (props) => [createTextVNode(props.title)]
这个函数保留了父组件的词法作用域（能访问 title），但实际执行推迟到子组件 render 阶段——此时它才能拿到子组件当前的响应式数据作为参数。
运行时通过 _renderSlot 动态调用
子组件 render 函数里调用：
-
_renderSlot($slots, 'header')→ 执行 header 插槽函数，传入空对象 -
_renderSlot($slots, 'item', { item: currentItem, index: i })→ 传入作用域数据，触发响应式追踪
动态插槽名如 v-slot:[name] 也不在编译期求值，而是在运行时根据 name 的当前值去 $slots 查找对应函数；若未定义，自动 fallback 到默认插槽或显示后备内容。
立即学习“前端免费学习笔记（深入）”；
后备内容与条件逻辑由编译器静态保障<slot>默认文案</slot> 中的“默认文案”只有在 $slots.default === undefined 时才保留——编译器能提前判断父组件是否提供了该插槽内容。
而 v-if 不能直接写在 <slot> 标签上（会导致插槽丢失），正确做法是包裹一层容器：
<div v-if="showHeader"><slot name="header"></slot></div>
这样插槽本身始终注册，只是外层容器控制显隐。
不复杂但容易忽略
