Vue3 Composition API组件default slot非函数值警告原因及解决方法

• Vue3的插槽默认是函数式设计，模板中使用插槽时，编译器会自动将插槽内容包装为返回VNode的惰性执行函数，仅当插槽需要渲染时才会执行生成VNode，能大幅减少不必要的计算开销，提升性能。
• 你在Composite组件的h函数调用中，直接传递了已经实例化完成的VNode数组作为插槽内容，而非函数形式，Vue识别到默认插槽不是函数类型，就会触发该性能提示。
• 模板写法不会触发警告的核心原因就是编译器自动做了插槽内容的函数包装，手写渲染函数时没有编译器的自动处理，就需要手动实现这个逻辑。

直接修改Composite组件中调用HelloWorld时的插槽传参格式，将插槽内容包装为函数即可：

// src/components/Composite.js 修正后代码
import { defineComponent, h } from "vue";

import HelloWorld from "./HelloWorld";

export default defineComponent({
  setup(props, { slots }) {
    return () =>
      // 插槽参数改为对象格式，default对应返回VNode数组的函数
      h(HelloWorld, {}, {
        default: () => [h("div", {}, ["Div 1"]), h("div", {}, ["Div 2"])]
      });
  }
});

如果需要透传父组件传给Composite的插槽，直接传入slots.default即可，它本身就是函数类型，无需额外包装。

内容的提问来源于stack exchange，提问作者hyperbotauthor