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

Vue 3 插槽机制深度解析：`normalizeSlotFn` 与 `renderSlot` 的舞蹈

各位朋友们，早上好！今天咱们来聊聊 Vue 3 源码里两个非常重要的函数，它们是插槽（Slots）机制的核心组成部分：normalizeSlotFn 和 renderSlot。插槽这玩意儿，用好了能让你的组件复用性噌噌噌地往上涨，代码也变得更优雅。但要是理解得不够透彻，就容易掉进坑里。所以，今天咱们就来扒一扒它们的底裤，看看它们到底是怎么配合着，把插槽内容渲染出来，又把作用域传递过去的。

1. 插槽是个啥？为啥我们需要它？

在深入源码之前，我们先来简单回顾一下插槽的概念。想象一下，你有一个组件，比如一个通用的 Modal（模态框）组件。你希望这个 Modal 组件的标题和内容可以根据不同的场景定制。如果没有插槽，你可能需要为每种不同的标题和内容写一个单独的 Modal 组件，或者通过 props 传递大量的数据和逻辑。这显然是不可取的。

插槽的出现就是为了解决这个问题。它允许你在使用组件的时候，往组件内部“塞入”自定义的内容。这样，Modal 组件就可以保持通用性，而具体的内容则由使用者来决定。

Vue 提供了三种类型的插槽：

默认插槽 (Default Slot)： 没有名字的插槽，组件如果没有指定插槽，会默认渲染到这个插槽。
具名插槽 (Named Slot)： 通过 name 属性命名的插槽，允许组件定义多个插槽，使用者可以通过 v-slot 指令指定要往哪个插槽里塞内容。
作用域插槽 (Scoped Slot)： 允许组件将数据传递给插槽内容，使用者可以在插槽内容中访问这些数据。

2. `normalizeSlotFn`：插槽函数的标准化大师

现在，让我们开始深入源码。首先登场的是 normalizeSlotFn。这个函数的主要职责就是把各种各样的插槽写法，统一转换成一个标准的函数形式。这样，后续的渲染逻辑就可以用统一的方式来处理它们。

在 Vue 3 的源码 packages/runtime-core/src/helpers/renderSlot.ts 文件中，我们可以找到 normalizeSlotFn 的定义（以下代码做了简化，只保留了核心逻辑）：

function normalizeSlotFn(slot: Slot | VNode | undefined): Slot | undefined {
  if (slot === undefined || slot === null) {
    return undefined
  }
  if (typeof slot === 'function') {
    return slot
  }
  return () => createBlock(Fragment, {}, slot)
}

这个函数接收一个 slot 参数，这个参数可以是以下几种类型：

undefined 或 null：表示没有插槽内容。
Function：表示插槽内容是一个函数，通常是作用域插槽。
VNode 或 Array<VNode>：表示插槽内容是一个或多个 VNode 节点。

normalizeSlotFn 的处理逻辑如下：

如果 slot 是 undefined 或 null，直接返回 undefined。
如果 slot 是一个函数，直接返回这个函数。这通常发生在作用域插槽的情况下，因为作用域插槽会返回一个函数，这个函数接收插槽的作用域数据，并返回 VNode 节点。
如果 slot 是一个 VNode 或 Array，那么会把它包装成一个返回 createBlock(Fragment, {}, slot) 的函数。 Fragment 是 Vue 的一个内置组件，它可以用来包裹多个根节点，而不会在 DOM 中生成额外的元素。

举个例子：

假设我们有以下模板代码：

<template>
  <MyComponent>
    <div>Hello, World!</div>
  </MyComponent>
</template>

在这个例子中，MyComponent 的默认插槽内容就是一个 <div> 元素。当 Vue 编译这个模板时，它会将 <div>Hello, World!</div> 转换成一个 VNode 对象。然后，normalizeSlotFn 会把这个 VNode 对象包装成一个函数，这个函数返回一个包含这个 VNode 对象的 Fragment。

为什么要这样做呢？

这样做的好处是，无论插槽内容是什么形式，我们都可以把它当作一个函数来处理。这样，我们就可以在渲染插槽的时候，统一调用这个函数，并根据需要传递作用域数据。

3. `renderSlot`：插槽渲染的总指挥

接下来，我们来看看 renderSlot 函数。这个函数是插槽渲染的总指挥，它负责调用 normalizeSlotFn 对插槽进行标准化，然后调用标准化后的插槽函数，最后把渲染结果返回。

在 Vue 3 的源码 packages/runtime-core/src/helpers/renderSlot.ts 文件中，我们可以找到 renderSlot 的定义（以下代码做了简化，只保留了核心逻辑）：

function renderSlot(
  slots: Slots,
  name: string,
  props: Data = {},
  fallback?: () => any,
  noSlotted?: boolean
): VNode | undefined {
  let slot = slots[name]

  // normalize slot / slots[name] may be non-compiled slot
  if (__COMPAT__ && slot && !slot._compiled) {
    slot = slots[name] = normalizeSlot(slot, currentRenderingInstance)
  }

  if (__DEV__ && slot && !slot._isVNode) {
    validateSlot(slot, currentRenderingInstance)
  }

  slot = normalizeSlotFn(slot)

  if (!slot) {
    return fallback ? callWithAsyncErrorHandling(fallback, null, ErrorCodes.RENDER_SLOT) : undefined
  }

  const renderFn = slot as Slot
  const normalizedSlot = renderFn(props)

  return createBlock(Fragment, { key: props.key }, normalizedSlot)
}

这个函数接收以下参数：

slots：组件的插槽对象，包含了所有插槽的信息。
name：要渲染的插槽的名称。
props：要传递给插槽的作用域数据。
fallback：当插槽没有内容时，要渲染的备用内容。
noSlotted：一个 boolean 值，它表示该组件是否接收任何被分发的内容。

renderSlot 的处理逻辑如下：

获取插槽函数： 首先，它从 slots 对象中获取指定名称的插槽函数。
标准化插槽函数： 然后，它调用 normalizeSlotFn 对插槽函数进行标准化。
处理没有插槽内容的情况： 如果标准化后的插槽函数是 undefined，表示没有插槽内容。此时，如果提供了 fallback 函数，就调用 fallback 函数渲染备用内容。否则，返回 undefined。
调用插槽函数： 如果有插槽内容，就调用标准化后的插槽函数，并把 props 作为参数传递给它。这样，插槽内容就可以访问到组件传递的作用域数据。
创建 Fragment： 最后，它把插槽函数的返回值（也就是 VNode 节点）包装在一个 Fragment 中，并返回这个 Fragment。

举个例子：

假设我们有以下组件：

<!-- MyComponent.vue -->
<template>
  <div>
    <slot name="header" :message="headerMessage">
      <h1>Default Header</h1>
    </slot>
    <slot>
      <p>Default Content</p>
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerMessage: 'Hello from MyComponent!'
    }
  }
}
</script>

然后，我们在父组件中使用 MyComponent：

<!-- ParentComponent.vue -->
<template>
  <MyComponent>
    <template #header="slotProps">
      <h2>{{ slotProps.message }}</h2>
    </template>
    <p>Custom Content</p>
  </MyComponent>
</template>

在这个例子中，MyComponent 定义了一个具名插槽 header 和一个默认插槽。 header 插槽还传递了一个 message 属性作为作用域数据。

当 Vue 渲染 ParentComponent 时，它会调用 renderSlot 函数来渲染 MyComponent 的插槽。

对于 header 插槽，renderSlot 函数会从 slots 对象中获取 header 插槽函数。这个插槽函数是由 ParentComponent 中 <template #header="slotProps"> 定义的。 renderSlot 函数会把 { message: 'Hello from MyComponent!' } 作为 props 参数传递给这个插槽函数。然后，插槽函数会返回一个 <h2> 元素的 VNode，其中包含了 slotProps.message 的值。 renderSlot 函数会把这个 <h2> 元素的 VNode 包装在一个 Fragment 中，并返回这个 Fragment。
对于默认插槽，renderSlot 函数会从 slots 对象中获取默认插槽函数。这个插槽函数是由 ParentComponent 中 <p>Custom Content</p> 定义的。 renderSlot 函数会调用这个插槽函数，并返回一个 <p> 元素的 VNode。 renderSlot 函数会把这个 <p> 元素的 VNode 包装在一个 Fragment 中，并返回这个 Fragment。

表格总结：

函数	职责	参数	返回值
`normalizeSlotFn`	将插槽内容标准化为一个函数。	`slot`: 插槽内容，可以是 `undefined`、`Function` 或 `VNode`。	如果 `slot` 是 `undefined`，返回 `undefined`。如果 `slot` 是函数，返回该函数。否则，返回一个返回包含 `slot` 的 `Fragment` 的函数。
`renderSlot`	渲染指定名称的插槽，并传递作用域数据。	`slots`: 组件的插槽对象。 `name`: 要渲染的插槽的名称。 `props`: 要传递给插槽的作用域数据。 `fallback`: 当插槽没有内容时，要渲染的备用内容。 `noSlotted`: 是否接收内容	插槽内容的 VNode，被包装在一个 `Fragment` 中。如果没有插槽内容，且提供了 `fallback` 函数，则返回 `fallback` 函数的返回值。否则，返回 `undefined`。

4. 作用域传递的秘密

现在，我们来重点看看作用域是怎么传递的。在 renderSlot 函数中，我们可以看到这样一行代码：

const normalizedSlot = renderFn(props)

这行代码就是作用域传递的关键。 renderFn 是经过 normalizeSlotFn 标准化后的插槽函数。 props 是要传递给插槽的作用域数据。当我们调用 renderFn(props) 时，实际上就是在调用插槽函数，并把 props 作为参数传递给它。

这样，插槽函数就可以访问到 props 中的数据，并用这些数据来渲染插槽内容。

再举个例子：

回到之前的 MyComponent 和 ParentComponent 的例子。在 ParentComponent 中，我们通过 <template #header="slotProps"> 定义了一个具名插槽 header。

当 Vue 渲染 header 插槽时，它会调用 renderSlot 函数，并把 { message: 'Hello from MyComponent!' } 作为 props 参数传递给 header 插槽函数。

在 header 插槽函数中，我们可以通过 slotProps.message 来访问到 message 属性的值。这样，我们就可以在插槽内容中使用 message 属性的值，并将其渲染到页面上。

5. 总结

normalizeSlotFn 和 renderSlot 这两个函数，就像是插槽机制的两个齿轮，紧密配合，共同完成了插槽的渲染和作用域传递。

normalizeSlotFn 负责把各种各样的插槽写法，统一转换成一个标准的函数形式。
renderSlot 负责调用 normalizeSlotFn 对插槽进行标准化，然后调用标准化后的插槽函数，最后把渲染结果返回。

通过理解这两个函数的原理，我们可以更好地掌握 Vue 的插槽机制，写出更灵活、更可复用的组件。

希望今天的讲解对大家有所帮助！如果有什么疑问，欢迎随时提问。谢谢大家！

Vue 3 插槽机制深度解析：normalizeSlotFn 与 renderSlot 的舞蹈

1. 插槽是个啥？为啥我们需要它？

2. normalizeSlotFn：插槽函数的标准化大师

3. renderSlot：插槽渲染的总指挥

4. 作用域传递的秘密

5. 总结

发表回复 取消回复

Vue 3 插槽机制深度解析：`normalizeSlotFn` 与 `renderSlot` 的舞蹈

2. `normalizeSlotFn`：插槽函数的标准化大师

3. `renderSlot`：插槽渲染的总指挥

发表回复取消回复