深入分析 Vue 3 源码中 `normalizeSlotFn` 和 `renderSlot` 函数，它们如何处理插槽内容的渲染和作用域传递。

各位老铁，大家好！我是你们的源码导游，今天咱们不聊妹子，不谈人生，就死磕 Vue 3 源码里的两个小妖精：normalizeSlotFn 和 renderSlot。 别看它们名字平平无奇，实际上是 Vue 3 插槽机制的核心，理解了它们，你就能更好地驾驭插槽，在组件间灵活穿梭数据，做出更酷炫的界面。

准备好了吗？发车！

一、插槽是个啥玩意？为啥要有 normalizeSlotFn 和 renderSlot？

先来复习一下插槽的概念。插槽，顾名思义，就是组件预留的“坑”，允许父组件往这些“坑”里填内容。 这样做的好处是，组件可以更加通用，同样的组件，父组件可以根据不同的需求，插入不同的内容，实现高度的定制化。

Vue 3 里的插槽分为两种：

• 默认插槽 (default slot): 没有名字的插槽，就像一个组件默认的“垃圾桶”，啥都能往里扔。
• 具名插槽 (named slot): 有名字的插槽，父组件需要指定往哪个名字的插槽里插入内容，方便组件更精确地控制内容的渲染位置。
• 作用域插槽 (scoped slot): 既能渲染父组件传递的内容，又能访问子组件内部的数据。

那么问题来了：

1. 父组件传过来的插槽内容可能是 VNode，可能是渲染函数，也可能直接是字符串。我们需要一个统一的处理方式，把它们“标准化”成渲染函数，方便后续处理。这就是 normalizeSlotFn 的职责。

2. 在子组件中，我们需要把插槽的内容渲染出来。但是，渲染的时候，我们需要传递一些数据给插槽，让父组件可以使用子组件内部的数据。这就是 renderSlot 的职责。

用大白话来说：

• normalizeSlotFn 就像一个插槽内容的“预处理器”，把各种各样的插槽内容变成统一的“渲染函数”。
• renderSlot 就像一个插槽内容的“渲染器”，负责把渲染函数渲染成 VNode，并且把子组件的数据传递给父组件。

二、normalizeSlotFn：插槽内容的“标准化”

normalizeSlotFn 的主要作用就是把插槽内容变成一个渲染函数。 这样做的目的是为了统一处理插槽内容，避免在渲染的时候出现各种各样的类型错误。

我们来看一下 Vue 3 源码中 normalizeSlotFn 的简化版本：

function normalizeSlotFn(slot, props) {
  if (!slot) {
    return () => null; // 如果插槽不存在，返回一个空函数
  }

  if (typeof slot === 'function') {
    return (props) => {
      const res = slot(props); // 执行插槽函数，获取渲染结果
      return res;
    };
  }

  // 如果插槽不是函数，把它变成一个渲染函数
  return () => slot; // 返回一个渲染函数，直接返回插槽内容
}

这个函数接收两个参数：

• slot: 插槽的内容，可能是 VNode、渲染函数、字符串等。
• props: 传递给插槽的数据，通常是子组件内部的数据。

normalizeSlotFn 的逻辑如下：

1. 如果 slot 不存在 (null/undefined)，返回一个空函数，表示没有插槽内容。
2. 如果 slot 是一个函数，直接返回这个函数。 如果slot是函数，它已经可以接受props参数并返回渲染结果了。
3. 如果 slot 不是一个函数，把它包装成一个渲染函数，返回一个函数，这个函数直接返回 slot 的值。

举个例子：

• 情况一：父组件传递的是 VNode:

  // 父组件
  <template>
    <MyComponent>
      <p>这是插槽内容</p>
    </MyComponent>
  </template>
  
  // 子组件
  <template>
    <div>
      <slot />
    </div>
  </template>

  在这个例子中，父组件传递的是一个 VNode (<p>这是插槽内容</p>)。 normalizeSlotFn 会把这个 VNode 包装成一个渲染函数，返回的函数会直接返回这个 VNode。

• 情况二：父组件传递的是渲染函数:

  // 父组件
  <template>
    <MyComponent>
      <template v-slot="{ message }">
        <p>{{ message }}</p>
      </template>
    </MyComponent>
  </template>
  
  // 子组件
  <template>
    <div>
      <slot :message="internalMessage" />
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        internalMessage: 'Hello from child!'
      };
    }
  };
  </script>

  在这个例子中，父组件传递的是一个渲染函数 (<template v-slot="{ message }">)。 normalizeSlotFn 会直接返回这个渲染函数。

总结一下，normalizeSlotFn 的作用就是把各种各样的插槽内容“标准化”成渲染函数，方便后续的渲染。

三、renderSlot：插槽内容的“渲染”

renderSlot 的主要作用就是把插槽的渲染函数渲染成 VNode，并且把子组件的数据传递给父组件。

我们来看一下 Vue 3 源码中 renderSlot 的简化版本：

import { createVNode, Fragment, openBlock, createBlock } from 'vue';

function renderSlot(slots, name, props = {}, fallback, noSlotted) {
  if (!slots) {
    return fallback && fallback(); // 如果 slots 不存在，返回 fallback 函数的结果
  }

  const slot = slots[name]; // 获取指定名称的插槽

  if (slot) {
    if (typeof slot !== 'function') {
      console.warn(`Invalid slot function for slot "${name}": Expected a function, but got ${typeof slot}.`);
      return null;
    }
    const slotFn = normalizeSlotFn(slot, props); // 标准化插槽函数
    const slotContent = slotFn(props); // 执行插槽函数，获取渲染结果

    // 如果渲染结果是数组，把它包装成 Fragment
    return createBlock(Fragment, null, slotContent);
  } else {
    return fallback && fallback(); // 如果插槽不存在，返回 fallback 函数的结果
  }
}

这个函数接收五个参数：

• slots: 插槽对象，包含了所有的插槽信息。
• name: 插槽的名称。
• props: 传递给插槽的数据，通常是子组件内部的数据。
• fallback: 备用内容，如果插槽不存在，会渲染备用内容。
• noSlotted: 一个布尔值，表示是否渲染默认插槽周围的包装元素。

renderSlot 的逻辑如下：

1. 如果 slots 不存在，并且提供了 fallback 函数，则执行 fallback 函数并返回其结果。
2. 根据 name 从 slots 对象中获取插槽内容。
3. 如果插槽存在：
   • 使用 normalizeSlotFn 对插槽内容进行标准化，确保它是一个渲染函数。
   • 执行渲染函数，并且把 props 作为参数传递给渲染函数，获取渲染结果。
   • 如果渲染结果是一个数组，把它包装成 Fragment，避免出现多个根节点的问题。
   • 返回渲染结果。
4. 如果插槽不存在，并且提供了 fallback 函数，则执行 fallback 函数并返回其结果。

举个例子：

// 父组件
<template>
  <MyComponent>
    <template v-slot="{ message }">
      <p>{{ message }}</p>
    </template>
  </MyComponent>
</template>

// 子组件
<template>
  <div>
    <slot name="default" :message="internalMessage">
      <p>This is fallback content</p>
    </slot>
  </div>
</template>

<script>
import { renderSlot } from 'vue';

export default {
  data() {
    return {
      internalMessage: 'Hello from child!'
    };
  },
  render() {
    return (
      <div>
        {renderSlot(this.$slots, 'default', { message: this.internalMessage }, () => <p>This is fallback content</p>)}
      </div>
    );
  }
};
</script>

在这个例子中：

• 父组件通过 v-slot 指令定义了一个具名插槽，并且传递了一个渲染函数。
• 子组件使用 renderSlot 函数渲染插槽内容。
• renderSlot 函数会执行父组件传递的渲染函数，并且把 internalMessage 作为 props 传递给父组件。
• 父组件可以使用 message 变量访问子组件的数据。
• 如果父组件没有提供插槽内容，renderSlot 函数会渲染 fallback 函数返回的内容。

四、normalizeSlotFn 和 renderSlot 的配合

normalizeSlotFn 和 renderSlot 就像一对好基友，一个负责“标准化”，一个负责“渲染”，配合起来才能完美地实现插槽的功能。

它们的配合流程如下：

1. 在组件的渲染函数中，使用 renderSlot 函数渲染插槽内容。
2. renderSlot 函数会首先检查插槽是否存在，如果不存在，渲染 fallback 内容。
3. 如果插槽存在，renderSlot 函数会使用 normalizeSlotFn 对插槽内容进行标准化，确保它是一个渲染函数。
4. renderSlot 函数会执行渲染函数，并且把子组件的数据作为 props 传递给渲染函数。
5. 渲染函数会返回 VNode，renderSlot 函数会把 VNode 渲染到页面上。

用一张表格来总结一下：

函数	职责	输入	输出
normalizeSlotFn	把插槽内容“标准化”成渲染函数	slot (插槽内容，可能是 VNode、渲染函数、字符串等), props (传递给插槽的数据)	渲染函数 (如果 slot 是函数，直接返回 slot；如果 slot 不是函数，返回一个返回 slot 的函数)
renderSlot	把插槽的渲染函数渲染成 VNode，并且把子组件的数据传递给父组件	slots (插槽对象), name (插槽的名称), props (传递给插槽的数据), fallback (备用内容)	VNode (如果插槽存在，返回插槽内容的 VNode；如果插槽不存在，返回 fallback 函数的结果)

五、总结

今天咱们一起深入分析了 Vue 3 源码中的 normalizeSlotFn 和 renderSlot 函数。 希望通过今天的讲解，大家能够对 Vue 3 的插槽机制有更深入的理解。

记住，normalizeSlotFn 负责“标准化”，renderSlot 负责“渲染”，它们是 Vue 3 插槽机制的核心。 掌握了它们，你就能更好地驾驭插槽，在组件间灵活穿梭数据，做出更酷炫的界面！

各位老铁，下课！