Vue2迁移Vue3后render函数触发栈溢出，求保留render的解决方案

在Vue2迁移到Vue3的过程中，你遇到的RangeError: Maximum call stack size exceeded错误，核心原因是Vue3对插槽的处理逻辑和Vue2存在差异：

• Vue2里，this.$slots.default直接是插槽内容对应的VNode数组，直接在render函数中渲染完全没问题。
• Vue3中，$slots下的每个插槽都是返回VNode数组的函数。如果直接在render函数里写{this.$slots.default}，相当于把这个函数本身作为渲染内容传入，Vue在处理时会触发无限递归调用，最终导致栈溢出。而template语法会自动处理插槽函数的调用，所以不会出现这个问题。

要保留render函数并修复错误，只需要在渲染插槽时调用对应的插槽函数即可：

render() {
  return (
    <form>
      {this.$slots.default ? this.$slots.default() : []}
    </form>
  );
}

如果组件有其他具名插槽，也要用同样的方式调用插槽函数，比如this.$slots.footer()。

内容的提问来源于stack exchange，提问作者Dr. Junior