Vue2

Render Functions Guide

Vue3

Render Functions Guide

结构

h(element, attrs: object, children: string | Array<VNode>)
            ^
           attrs 可以省略

<aside> 💡 这个 h 函数和 React.createElement 的协议是不兼容的,Vue 要求 children 必须以数组的形式传递。 以致于,你可能无法直接使用 esbuild、typescript 转译标准的 JSX。

</aside>

<aside> 💡 Vue3 h 和 React.createElement 一样支持无限参数

</aside>

<aside> 💡 兼容方案:封装 h 兼容 React.createElement

</aside>

获取已注册的组件

Vue2, 可以直接使用

render(h) {
    return h('button-counter')
  }

使用 resolveComponent

setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }

<aside> 💡 兼容方案:封装 resolveComponent 方法。但是最佳实践是显式导入组件,这样才能获取到类型检查

</aside>