解释 Vue 3 源码中 `normalizeSlotFn` 和 `renderSlot` 函数，它们如何处理插槽内容的渲染和作用域传递。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，各位观众老爷，晚上好！今天咱们来聊聊 Vue 3 源码里两个挺有意思的小家伙：normalizeSlotFn 和 renderSlot。别看名字有点儿学术，实际上它们的工作就是把咱们写在模板里的插槽 (slot) 内容，漂漂亮亮地渲染出来，并且把需要的数据安全可靠地传递进去。咱们的目标是：看完这篇文章，以后再看 Vue 源码里关于插槽的部分，能做到心中有数，嘴角微微一笑，说一句：“这玩意儿，我懂！”

一、插槽是个啥？为啥需要 normalizeSlotFn 和 renderSlot？

先来回顾一下插槽的概念。插槽允许父组件向子组件传递模板片段，这些模板片段会在子组件的特定位置渲染。这样一来，子组件的结构就变得更加灵活，可以根据父组件的需求进行定制。

比如，咱们有个 MyButton 组件：

<!-- MyButton.vue -->
<template>
  <button class="my-button">
    <slot>默认按钮</slot>  <!-- 默认插槽 -->
  </button>
</template>

<script>
export default {
  name: 'MyButton'
}
</script>

然后，在父组件里使用它：

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyButton>点我一下！</MyButton>
  </div>
</template>

在这个例子里，点我一下！ 这段文字就通过插槽传递给了 MyButton 组件，替换了默认插槽的内容。

那么，问题来了：

插槽内容怎么传递？ Vue 需要一套机制，把父组件提供的插槽内容“塞”到子组件里。
插槽内容里可能要用到数据呀！ 父组件或者子组件可能需要向插槽内容传递一些数据（比如，插槽内部需要根据当前的状态显示不同的内容）。
插槽内容可以是函数！ Vue 3 支持作用域插槽，这意味着插槽内容可以是一个函数，这个函数接收一些参数，然后返回渲染的内容。

这就是 normalizeSlotFn 和 renderSlot 大显身手的地方了。它们负责：

normalizeSlotFn： 规范化插槽函数。确保插槽能正确地接收参数并返回 VNode。
renderSlot： 渲染插槽。它会执行插槽函数（如果存在），获取 VNode，然后把它们渲染到正确的位置。

二、normalizeSlotFn：插槽函数的“整容医生”

normalizeSlotFn 的主要作用是确保插槽函数能正常工作。因为插槽可能来自不同的地方，格式可能不太统一，所以需要进行规范化处理。

直接看源码（简化版，只保留核心逻辑）：

function normalizeSlotFn(slot, vm) {
  if (!slot) {
    return null
  }
  if (typeof slot !== 'function') {
    // 如果不是函数，就包装成一个返回 VNode 的函数
    return () => createTextVNode(String(slot))
  }
  return (...args) => {
    // 执行插槽函数，并返回 VNode
    return slot(...args)
  }
}

这个函数接收两个参数：

slot：插槽内容，可能是 VNode、字符串，或者函数。
vm：组件实例（虽然简化版里没用到，但实际源码里会用到 vm 来处理一些上下文相关的事情）。

它的工作流程是这样的：

如果 slot 是 null 或 undefined： 直接返回 null。说明这个插槽没有内容。
如果 slot 不是函数： 把它包装成一个函数，这个函数返回一个文本 VNode，内容就是 slot 的字符串形式。这样可以处理直接传递字符串的情况，比如 <MyButton>Hello</MyButton>。
如果 slot 是函数： 返回一个新的函数，这个新函数会接收任意数量的参数 (...args)，然后调用原始的 slot 函数，把这些参数传递进去，并返回 slot 函数返回的结果（通常是 VNode）。

举个栗子：

假设父组件这样使用 MyButton：

<MyButton>
  {{ message }}  <!-- message 是父组件的数据 -->
</MyButton>

这里的插槽内容 {{ message }} 会被编译成一个 VNode，然后传递给 normalizeSlotFn。由于它不是一个函数，所以 normalizeSlotFn 会把它包装成一个返回文本 VNode 的函数。

再假设父组件使用了作用域插槽：

<MyButton>
  <template #default="slotProps">
    {{ slotProps.count }}  <!-- count 是子组件传递的数据 -->
  </template>
</MyButton>

这里的插槽内容会被编译成一个函数，这个函数接收一个 slotProps 对象，然后返回一个包含 {{ slotProps.count }} 的 VNode。 normalizeSlotFn 会返回一个新的函数，这个新函数会调用原始的插槽函数，并把 slotProps 传递进去。

表格总结：normalizeSlotFn 的作用

插槽类型	`normalizeSlotFn` 的处理
`null` / `undefined`	返回 `null`
非函数	包装成一个函数，返回包含字符串形式的文本 VNode
函数	返回一个新的函数，该函数接收任意参数，调用原始插槽函数并传入这些参数，然后返回原始插槽函数的返回值（VNode）

三、renderSlot：插槽的“舞台总监”

renderSlot 的职责是真正地渲染插槽内容。它接收插槽函数（经过 normalizeSlotFn 处理过的）、插槽名称、以及需要传递给插槽函数的数据，然后执行插槽函数，获取 VNode，并返回这些 VNode。

源码（同样是简化版）：

function renderSlot(slots, name, props = {}, fallback) {
  const slot = slots[name]

  if (slot) {
    // 执行插槽函数，获取 VNode
    const slotFn = normalizeSlotFn(slot)
    if(slotFn){
        const slotContent = slotFn(props);
        return createBlock(Fragment, {}, slotContent);
    }

  } else if (fallback) {
    // 如果没有找到插槽，使用 fallback 内容
    return createBlock(Fragment, {}, fallback()); // fallback is a function
  }
}

这个函数接收四个参数：

slots：一个对象，包含了组件的所有插槽函数。通常是 this.$slots。
name：插槽的名称（比如，"default"、"header" 等）。
props：需要传递给插槽函数的数据。这个对象会作为参数传递给插槽函数。
fallback：一个函数，返回默认的插槽内容。如果找不到指定名称的插槽，就会使用这个 fallback 函数返回的内容。

它的工作流程是这样的：

从 slots 对象中获取指定名称的插槽函数： const slot = slots[name]。
如果找到了插槽函数：
- 调用 normalizeSlotFn 对插槽函数进行规范化处理.
- 执行插槽函数，并把 props 作为参数传递进去：const slotContent = slotFn(props)。
- 返回插槽函数返回的 VNode, 用 Fragment包裹，方便处理多个根节点.
如果没有找到插槽函数，但提供了 fallback： 执行 fallback 函数，并返回它返回的 VNode。
如果既没有找到插槽函数，也没有提供 fallback： 什么也不返回（实际上会返回 undefined）。

举个栗子：

假设 MyButton 组件这样使用 renderSlot：

<!-- MyButton.vue -->
<template>
  <button class="my-button">
    <slot v-if="!$slots.default">默认按钮</slot>
    <template v-else>
        <render-slot :slots="$slots" name="default" :props="{ buttonType: buttonType }"></render-slot>
    </template>
  </button>
</template>

<script>
import { defineComponent, h, Fragment } from 'vue';

export default defineComponent({
  name: 'MyButton',
  props: {
    buttonType: {
      type: String,
      default: 'primary'
    }
  },
  components:{
    'render-slot':{
        props:['slots','name','props'],
        render(){
            const slot = this.slots[this.name];
            if(!slot) return null;
            const normalizedSlot = (typeof slot === 'function') ? slot : () => slot;
            const slotContent = normalizedSlot(this.props);
            return h(Fragment, {}, slotContent);
        }
    }
  }
});
</script>

父组件这样使用 MyButton：

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyButton :buttonType="buttonType">
      {{ message }}  <!-- message 是父组件的数据 -->
    </MyButton>
  </div>
</template>

<script>
import { ref } from 'vue';
import MyButton from './MyButton.vue';

export default {
  components: {
    MyButton
  },
  setup() {
    const message = ref('点我啊！');
    const buttonType = ref('secondary');
    return {
      message,
      buttonType
    };
  }
}
</script>

在这个例子里，MyButton 组件内部使用 renderSlot 渲染了 default 插槽，并且把 buttonType 作为 props 传递给了插槽函数。这意味着，父组件提供的插槽内容可以访问到 buttonType 这个数据。

再举一个作用域插槽的栗子：

<!-- MyList.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot name="item" :item="item">
        {{ item.name }}  <!-- 默认的 item 插槽内容 -->
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MyList',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <MyList :items="listData">
      <template #item="slotProps">
        <strong>{{ slotProps.item.name }}</strong> - {{ slotProps.item.price }}
      </template>
    </MyList>
  </div>
</template>

<script>
import MyList from './MyList.vue';

export default {
  components: {
    MyList
  },
  data() {
    return {
      listData: [
        { id: 1, name: '苹果', price: 5 },
        { id: 2, name: '香蕉', price: 3 },
        { id: 3, name: '橘子', price: 4 }
      ]
    };
  }
}
</script>

在这个例子里，MyList 组件定义了一个名为 item 的作用域插槽，并且把 item 对象作为 props 传递给了插槽函数。父组件通过 <template #item="slotProps"> 使用了这个插槽，并且可以访问到 slotProps.item，从而定制列表项的渲染方式。

表格总结：renderSlot 的作用

情况	`renderSlot` 的行为
找到了指定名称的插槽函数	调用 `normalizeSlotFn` 进行规范化处理，然后执行插槽函数，把 `props` 作为参数传递进去，并返回插槽函数返回的 VNode.
没有找到插槽函数，但提供了 `fallback`	执行 `fallback` 函数，并返回它返回的 VNode。
既没有找到插槽函数，也没有提供 `fallback`	什么也不返回（返回 `undefined`）。

四、normalizeSlotFn 和 renderSlot 的关系：珠联璧合，天作之合

normalizeSlotFn 和 renderSlot 就像一对好基友，分工明确，配合默契。

normalizeSlotFn 负责把各种各样的插槽内容“整容”成统一的格式，确保它们能被 renderSlot 正确地执行。
renderSlot 负责真正地执行插槽函数，把插槽内容渲染到页面上，并且把需要的数据传递给插槽函数。

它们共同完成了一项重要的任务：让 Vue 的插槽机制更加灵活、强大、易用。

五、总结：妈妈再也不用担心我的插槽了！

通过今天的讲解，相信大家对 Vue 3 源码中的 normalizeSlotFn 和 renderSlot 有了更深入的理解。它们是 Vue 插槽机制的核心组成部分，负责规范化插槽函数和渲染插槽内容，使得父组件可以灵活地定制子组件的结构和内容。

以后再遇到插槽相关的问题，或者阅读 Vue 源码时，希望大家能想起今天的内容，自信地说一句：“插槽？小菜一碟！”

好了，今天的讲座就到这里。感谢大家的收听！咱们下次再见！

发表回复 取消回复

发表回复取消回复