插槽让组件具备了“内容分发”的能力，但它在 Vue 内部并不是直接拼接字符串，而是通过一种函数式渲染的机制实现的。理解它的底层原理，能帮助你更好地驾驭作用域插槽、插槽的响应式行为以及性能优化。
插槽的本质是函数
当你编写一个插槽时，Vue 的编译器会把插槽内容转换成一个返回虚拟 DOM（VNode）的函数。这个函数被保存在子组件的 slots 对象里，子组件在渲染时通过调用这个函数，把父组件交给它的内容“填充”到对应位置。
以一个默认插槽为例：
<!-- 父组件 -->
<Child>
<span>{{ message }}</span>
</Child>模板编译后，<span>{{ message }}</span> 这部分会被编译成一个函数（类似 () => h('span', message.value)），然后作为 slots.default 传递给 Child 组件。Child 组件内部：
<template>
<div>
<slot></slot>
</div>
</template><slot> 实际上会被编译成对 slots.default 函数的调用——执行父组件传进来的函数，拿到 VNode，再插入到当前 VNode 树的这个位置上。
具名插槽的原理完全一样，只是函数会挂载到 slots 对象的不同键上（如 slots.header、slots.footer）。
作用域插槽的本质是“参数化函数”
作用域插槽稍微复杂一点：子组件需要向父组件的插槽内容传递数据。这时，子组件仍然把插槽当作一个函数，但它调用这个函数时会传入参数，而父组件的插槽模板在编译时就会被编译成一个可以接收这些参数的函数。
<!-- 父组件 -->
<Child v-slot="{ item }">
<span>{{ item.name }}</span>
</Child>父组件的插槽内容被编译成：(slotProps) => h('span', slotProps.item.name)。Child 内部：
<template>
<div>
<slot :item="someData"></slot>
</div>
</template><slot :item="someData"> 被编译成调用 slots.default({ item: someData })。VNode 的生成完全取决于父组件传入的函数，但它执行时又能拿到子组件的数据——这就是“作用域”的真正含义：数据由子组件提供，渲染逻辑由父组件决定。
渲染时机与作用域规则
一个最容易踩的坑是：插槽内容中访问的数据，到底属于父组件还是子组件？记住一句话：插槽内容在父组件的作用域内编译。
- 默认插槽和具名插槽的内容，可以访问父组件的数据和响应式变量，无法访问子组件内声明的数据。
- 作用域插槽能访问子组件通过
slot属性暴露出来的数据，但这些数据必须先被子组件显式传递出来。
从渲染时序看：
- 父组件重新渲染时，会重新执行插槽函数，生成新的 VNode。此时如果父组件的某个数据变化了，插槽内的视图会跟着更新，因为插槽函数是一个“订阅了父组件响应式数据”的副作用函数。
- 子组件重新渲染时，会调用
slots上的函数来获取填充内容。如果子组件传给作用域插槽的数据变化了，已经缓存的插槽函数会被重新执行（因为传入的参数变了），生成新的 VNode。
所以，插槽的更新是双途的：父组件数据变化驱动插槽内容重新生成，子组件通过作用域插槽暴露的数据变化也会驱动插槽内容重新生成。Vue 的响应式系统会精确追踪这些依赖，保证插槽内容高效、按需更新。
为什么不会导致“父变全更新”
你可能会担心：父组件的任何数据变化，都会导致插槽函数重新执行，进而导致子组件的插槽区域重新渲染。这确实是存在的，但 Vue 在编译阶段和运行时做了优化：如果插槽内容没有被标记为动态，或者子组件做了合理的 v-memo 或 shouldComponentUpdate 控制（如对 slots 的浅比较），就可以避免不必要的重渲染。更重要的是，Vue 3 的 PatchFlags 和静态提升机制对插槽函数同样生效：静态插槽内容会被直接提升为常量，不再重新生成，只有真正依赖了动态数据的插槽才会被重新执行。
实用总结：
- 插槽不是魔术，它就是一个存放在
slots对象里的“渲染函数”，子组件通过调用它来渲染父组件交给自己的东西。 - 作用域插槽的威力在于“子组件提供数据，父组件控制渲染”，这让数据驱动列表、可复用的列表组件等场景变得异常简洁。
- 性能上，静态插槽无额外开销，动态插槽也会被响应式精确追踪，无需过度恐慌——只有极少数的极端场景（如几千行的大表格同时有多个超复杂插槽）才需要手动优化。