Vue自定义组件中render函数处理默认插槽的警告问题

问题背景 #

使用Vue的render()函数传递默认插槽时，先后遇到两个警告：

1. 直接传递字符串值作为插槽内容时，触发警告：Non-function value encountered for default slot. Prefer function slots for better performance.
2. 将插槽改为函数形式后，子组件在mounted钩子中调用插槽函数，又触发警告：Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

解决方案 #

核心是将插槽函数的调用移到子组件的render函数内部，而非在mounted等生命周期钩子中调用，这样既符合Vue的依赖追踪机制，又能消除警告，同时保证插槽内容更新时子组件能同步渲染。

修改后的父组件代码

import { defineComponent, h } from "vue";
import MySub from "./mySub.ts"

export default defineComponent({
  render() {
    // 保持函数形式的插槽，符合性能优化要求
    return h(MySub, {}, () => 'innerHTML')
  }
})

修改后的子组件代码

import { defineComponent, h } from "vue";

export default defineComponent({
  render() {
    // 在render函数内调用插槽函数，获取内容
    const slotContent = this.$slots.default 
      ? (this.$slots.default()[0]?.children || '') 
      : '';
    // 直接拼接内容并返回VNode
    return h('div', {}, `${slotContent} "here my added Stuff"`);
  }
})

原理说明 #

• Vue要求插槽函数必须在组件的render阶段调用，这样才能正确追踪插槽内部的响应式依赖，确保数据更新时组件能重新渲染。
• 原代码在mounted中调用插槽函数，属于渲染完成后的阶段，脱离了Vue的响应式追踪链路，因此触发警告，且无法响应插槽内容的后续变化。

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