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

好的，各位靓仔靓女们，今天咱们来聊聊 Vue 3 源码里两个至关重要的函数：normalizeSlotFn 和 renderSlot。它们就像舞台上的灯光师和主持人，一个负责把演员（插槽内容）准备好，另一个负责把他们呈现给观众（渲染到页面上）。

准备好了吗？咱们开讲！

一、normalizeSlotFn: 插槽函数的标准化大师

想象一下，你写了一个组件，里面定义了一些插槽，允许用户自定义内容。但是，用户在使用你的组件时，可能以各种不同的方式来传递插槽内容，比如：

直接传递文本或 VNode： <MyComponent>Hello World!</MyComponent>
传递一个渲染函数： <MyComponent v-slot="{ data }">{{ data.message }}</MyComponent>
不传递任何内容（使用默认插槽）。

normalizeSlotFn 的任务就是统一处理这些不同的情况，把它们都变成一个标准的、可调用的函数。这样，后续的渲染流程就可以以一种一致的方式来处理插槽内容。

咱们来看看它的简化版源码（为了便于理解，我省略了一些不必要的类型检查和优化）：

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

  if (typeof slot === 'function') {
    return (scope) => {
      const result = slot(scope);
      return Array.isArray(result) ? result : [result];
    }; // 如果插槽本身就是一个函数，直接返回
  }
    //如果不是函数，直接创建vnode返回
  return () => [h(Text, slot)]; // 如果插槽是文本或 VNode，包装成一个函数
}

这个函数接收两个参数：

slot: 待处理的插槽内容，可以是 undefined、文本、VNode 或一个渲染函数。
scope: 传递给插槽的作用域数据。

这个函数的核心逻辑是：

处理 undefined 情况： 如果 slot 是 undefined，说明没有传递任何插槽内容，那就返回一个渲染 null 的函数。这避免了后续的错误。
处理函数情况： 如果 slot 本身就是一个函数，那就直接返回它。但是，我们需要确保这个函数返回的是一个 VNode 数组，所以用一个匿名函数包装一下，如果返回的不是数组，就把它放到一个数组里。
处理文本/VNode 情况： 如果 slot 是文本或 VNode，那就把它包装成一个函数，这个函数返回一个包含该文本或 VNode 的数组。这里使用 h 函数来创建一个 VNode。

示例：

假设我们有以下插槽内容：

<template>
  <MyComponent>
    Hello, {{ name }}!
  </MyComponent>
</template>

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

export default {
  components: {
    MyComponent
  },
  setup() {
    const name = ref('Vue');
    return {
      name
    };
  }
};
</script>

在 MyComponent 内部，如果它使用 normalizeSlotFn 来处理插槽，那么 Hello, {{ name }}! 这个插槽内容会被转换成一个返回包含文本 VNode 的函数。

二、renderSlot: 插槽内容的渲染指挥官

renderSlot 的职责是将经过 normalizeSlotFn 处理后的插槽函数渲染到页面上。它负责调用插槽函数，传递作用域数据，并把返回的 VNode 数组渲染到指定的位置。

它的简化版源码如下：

import { Fragment, createVNode, openBlock, createBlock } from 'vue';
import { isArray } from '@vue/shared'

function renderSlot(slots, name, props = {}, fallback, slotScope = {}) {
  const slot = slots[name]; // 获取指定名称的插槽
  let slotFn = normalizeSlotFn(slot, slotScope); // 标准化插槽函数

  if (!slotFn) {
    return fallback ? fallback(props) : null; // 如果插槽不存在，使用 fallback 或返回 null
  }

  const renderResult = slotFn(props); // 调用插槽函数，传递作用域数据

  if (!renderResult) {
    return null; // 如果插槽函数返回空，则不渲染
  }

  //将结果扁平化
  const normalizedSlot = isArray(renderResult) ? renderResult : [renderResult];

  return (
    openBlock(),
    createBlock(Fragment, {key: name}, normalizedSlot)
  )
}

这个函数接收以下参数：

slots: 一个对象，包含了所有可用的插槽函数。
name: 要渲染的插槽的名称。
props: 传递给插槽函数的作用域数据。
fallback: 一个可选的回退函数，如果插槽不存在，则调用该函数来渲染默认内容。
slotScope: 传递给normalizeSlotFn标准化后的作用域数据

这个函数的核心逻辑是：

获取插槽函数： 首先，根据插槽名称 name 从 slots 对象中获取对应的插槽函数。
标准化插槽函数： 调用 normalizeSlotFn 来标准化插槽函数，确保它是一个可调用的函数。
处理插槽不存在的情况： 如果 slotFn 是 undefined，说明插槽不存在。此时，如果提供了 fallback 函数，则调用 fallback 函数来渲染默认内容；否则，返回 null。
调用插槽函数： 调用 slotFn 函数，并传递作用域数据 props。props 对象包含了父组件传递给插槽的数据。
处理插槽函数返回空的情况： 如果插槽函数返回 undefined 或 null，则不渲染任何内容。
创建 VNode： 将插槽函数返回的 VNode 数组包装在一个 Fragment VNode 中，并返回该 VNode。Fragment 是 Vue 3 中引入的一个特殊 VNode，它可以避免在渲染过程中创建额外的 DOM 元素。
扁平化返回值： 确保返回值是一个数组，如果不是数组，就包装成数组。

示例：

假设 MyComponent 的模板如下：

<template>
  <div>
    <h1>My Component</h1>
    <slot name="header" :title="title">
      <h2>Default Header</h2>
    </slot>
    <p>Content</p>
    <slot name="footer">
      <p>Default Footer</p>
    </slot>
  </div>
</template>

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

export default {
  setup() {
    const title = ref('My Title');
    return {
      title
    };
  }
};
</script>

在 MyComponent 内部，我们可以使用 renderSlot 来渲染插槽：

import { renderSlot } from 'vue';

export default {
  render() {
    return h(
      'div',
      null,
      [
        h('h1', null, 'My Component'),
        renderSlot(this.$slots, 'header', { title: this.title }, (props) => h('h2', null, 'Default Header')),
        h('p', null, 'Content'),
        renderSlot(this.$slots, 'footer', {}, () => h('p', null, 'Default Footer'))
      ]
    );
  }
};

在这个例子中：

renderSlot(this.$slots, 'header', { title: this.title }, () => h('h2', null, 'Default Header')) 会渲染名为 header 的插槽。{ title: this.title } 是传递给插槽的作用域数据。如果 header 插槽没有被定义，则会渲染默认的 <h2>Default Header</h2>。
renderSlot(this.$slots, 'footer', {}, () => h('p', null, 'Default Footer')) 会渲染名为 footer 的插槽。如果 footer 插槽没有被定义，则会渲染默认的 <p>Default Footer</p>。

三、normalizeSlotFn 和 renderSlot 如何处理插槽作用域

插槽的作用域是指在插槽内容中可以访问的数据。Vue 允许父组件通过作用域插槽向子组件传递数据，子组件可以通过 v-slot 指令来接收这些数据。

normalizeSlotFn 和 renderSlot 在处理插槽作用域方面扮演着关键的角色：

normalizeSlotFn 接收作用域数据： normalizeSlotFn 函数接收一个 scope 参数，这个参数就是传递给插槽的作用域数据。
renderSlot 传递作用域数据： renderSlot 函数在调用插槽函数时，会将 props 对象作为参数传递给插槽函数。这个 props 对象包含了父组件传递给插槽的所有数据。
插槽函数使用作用域数据： 插槽函数内部可以使用传递过来的 props 对象来访问作用域数据，并将其渲染到页面上。

示例：

假设我们有以下组件：

// MyComponent.vue
<template>
  <div>
    <slot :message="message">
      {{ message }}
    </slot>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello from MyComponent!');
    return {
      message
    };
  }
};
</script>

// App.vue
<template>
  <MyComponent>
    <template v-slot="{ message }">
      {{ message }}
    </template>
  </MyComponent>
</template>

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

export default {
  components: {
    MyComponent
  }
};
</script>

在这个例子中：

MyComponent 通过 :message="message" 将 message 数据传递给插槽。
App.vue 使用 <template v-slot="{ message }"> 来接收 message 数据，并将其渲染到页面上。

normalizeSlotFn 和 renderSlot 的工作流程如下：

在 MyComponent 中，renderSlot 函数会被调用来渲染默认插槽。
renderSlot 函数会获取 message 数据，并将其作为 props 对象传递给插槽函数。
App.vue 中定义的插槽函数会被调用，并接收到包含 message 属性的 props 对象。
插槽函数可以使用 props.message 来访问 message 数据，并将其渲染到页面上。

四、总结

normalizeSlotFn 和 renderSlot 是 Vue 3 源码中处理插槽渲染的关键函数。它们负责标准化插槽函数，传递作用域数据，并将插槽内容渲染到页面上。理解这两个函数的工作原理，可以帮助我们更好地理解 Vue 的插槽机制，并编写更灵活、更可复用的组件。

表格总结:

| 函数名称 | 作用 | 参数 | 返回值 |
| ——————- | ————————————————————————————————- | —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————- 今天就到这里，希望对大家有帮助！

发表回复 取消回复

发表回复取消回复