编译器如何处理动态插槽名？解决 Block Tree 结构变化的兼容性策略

Vue 3 编译器对动态插槽名的处理，核心在于编译期静态识别失败 + 运行时 VNode 匹配兜底。它不把 v-slot:[name] 当作固定插槽锚点，而是转为运行时查找逻辑，这直接干扰 Block Tree 的静态区块划分，带来性能与兼容性风险。

动态插槽名在编译阶段被降级为“非静态锚点”

编译器无法在构建时确定 v-slot:[slotName] 最终会匹配哪个具名插槽，因此：

不会将 <slot :name="slotName"></slot> 视为可提升的静态占位，哪怕 slotName 是常量字符串或 computed 属性 对应的插槽调用点不会被纳入 Block Tree 的稳定边界，整个父 block 会被标记为“含动态插槽”，失去静态提升机会 插槽内容（父组件中 <template #[slotName]>…</template>）被编译为 slots[slotName] = () => … 形式，挂载到 slots 对象上，函数体保留在 block 内部，每次 patch 都需重新执行

例如：

<!– 子组件 –><slot :name="currentTab"></slot>

即使 currentTab = ‘panel’ 是响应式无关的 ref，编译器仍视为潜在动态路径，不 hoist、不缓存、不跳过 diff。

微信小程序等跨平台环境的额外变形

UniApp 等编译器在处理动态插槽名时，会叠加平台适配逻辑：

将 v-slot:[name] 转为小程序 slot 属性，但因小程序 slot 属性不支持表达式，必须固化为字符串 在 v-for 中使用时，自动拼接索引（如 date_range_panel-0），导致插槽名错位 若父组件传入 :name="item.slot"，而子组件写 <slot :name="item.slot">，两边 name 字符串不一致 → 插槽内容丢失

本质是：动态插槽名打破了“模板结构可预判”这一 Block Tree 的前提假设，跨平台工具链只能靠规则补丁硬映射，极易出错。

兼容 Block Tree 的替代策略

目标是让插槽调用点回归“静态可识别”，同时保留运行时切换能力：

用多个静态 <slot name="xxx"> 占位 + v-if 控制显隐

<slot name="header" v-if="tab === ‘header’"></slot><slot name="panel" v-if="tab === ‘panel’"></slot><slot name="footer" v-if="tab === ‘footer’"></slot>

编译器能识别每个 <slot name="…"> 是独立静态锚点，Block Tree 可分别优化，且 v-if 条件本身可被 memo 化

把动态逻辑上提到父组件，子组件只接收固定插槽名

<!– 父组件 –><MyTab :active-tab="tab"> <template #header><Header /></template> <template #panel><Panel /></template></MyTab>

子组件内部用 slots[props.activeTab]?.() 调用，插槽名仍是静态字符串，block 边界清晰

配合 v-memo 固定插槽调用依赖

<div v-memo="[tab]"> <slot :name="tab"></slot></div>

虽不能恢复静态提升，但可缓存该 block 下插槽函数的返回 VNode，避免重复创建

避免在高频更新区域（如列表项、滚动容器）使用动态插槽名列表每项都带 v-slot:[key]，会导致每个 item block 都无法静态化，patch 开销线性增长

如何验证是否破坏了 Block Tree？

打开 Vue Devtools → Components → 查看组件 render 函数输出，搜索 openBlock 和 createBlock 调用：

若插槽调用出现在 createBlock(…, […dynamicChildren]) 的 dynamicChildren 数组里 → 已被 Block Tree 正确隔离 若整个组件 render 函数里找不到 createBlock，或插槽调用混在大量 createVNode 中 → Block Tree 未生效，大概率因动态插槽名或其他不可推断表达式阻断

不复杂但容易忽略