在 Vue 3 中，插槽的内容是以函数形式定义的，这样做有几个关键的原因：

  1. 延迟计算：通过使用函数，插槽内容的计算和渲染可以被延迟到实际需要的时候。这意味着如果插槽内容在创建虚拟节点时不需要被立即渲染，它可以在插槽被访问时才进行计算。这样可以提高性能，尤其是在插槽内容复杂且仅在某些条件下才需要渲染时。
  2. 动态性：插槽函数允许插槽内容在父组件的状态变化时动态更新。例如，如果插槽内容依赖于父组件的某些数据，使用函数形式可以确保每次渲染时插槽内容都能正确反映最新的状态。
  3. 灵活性：使用函数可以让插槽内容更加灵活。插槽函数可以接受参数，这样子组件可以向父组件提供数据或事件回调，从而实现复杂的交互逻辑。

包装虚拟节点为函数的具体原因

const vnode = createVNode(Message, props,
    isFunction(props.message) || isVNode(props.message) ?
        { default: isFunction(props.message) ? props.message : () => props.message } : null);

在你的代码中，虚拟节点被包装为一个函数，以符合 Vue 3 插槽机制的要求：

如果 props.message 是一个虚拟节点，而不是一个函数，为了使它能够作为插槽内容传递， 需要将其包装为一个返回该虚拟节点的函数，即 () => props.message。这样可以确保 props.message 作为插槽内容能够被正确处理和渲染。

具体例子说明

假设你有一个 Message 组件，接收一个默认插槽：

<template>
  <div>
    <slot></slot>
  </div>
</template>

在父组件中，如果直接传递虚拟节点作为插槽内容：

const messageVNode = createVNode('span', null, 'Hello');
const vnode = createVNode(Message, props, { default: () => messageVNode });

这里将虚拟节点 messageVNode 包装成一个函数 () => messageVNode，使其符合 Vue 插槽的机制。这样在 Message 组件中，插槽内容可以在需要的时候被调用和渲染。

代码优化

让我们重新审视和优化之前的代码，使之更清晰：

const vnode = createVNode(Message, props, {
    default: isFunction(props.message)
        ? props.message
        : isVNode(props.message)
            ? () => props.message
            : undefined
});

这样明确地处理了不同类型的 props.message：

  • 如果 props.message 是一个函数，直接作为插槽内容。
  • 如果 props.message 是一个虚拟节点，包装成返回虚拟节点的函数。
  • 如果 props.message 既不是函数也不是虚拟节点，则不传递任何子节点或插槽给 Message 组件（通过 undefined）。

这确保了插槽内容符合 Vue 3 的插槽机制，并且处理不同类型的 props.message 逻辑清晰明确。

Last Updated:
Contributors: BaronYan