概念

Vue 官方推荐使用模版语法来创建应用，但是遇到只能使用 javascript 的场景就不得不使用渲染函数。Vue 提供了 h() 函数来创建 vnodes，它是 hyperscript 的简称，可以理解为能创建 HTML 的 javascript，这个函数使用方式非常灵活。

// 完整参数签名
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// 省略 props
function h(type: string | Component, children?: Children | Slot): VNode

type Children = string | number | boolean | VNode | null | Children[]

type Slot = () => Children

type Slots = { [name: string]: Slot }

以上是官方的 API 介绍，可以看出，除了 type 是必填的，另外两个参数都是选填的。第一个参数既可以是字符串也可以是一个组件，第二个参数是 props，第三个参数是子节点。

实际开发过程中会分成组合式 API 和选项使 API 两种场景，这里提供的案例都是使用组合式 API 的形式，也就是只会在 setup 函数中使用渲染函数。为了学习方便，推荐使用线上开发环境 play.vuejs.org/

以上是最简单的一个渲染函数例子，引入了 h() 函数，渲染了一个内容为 hello 的 div 节点。下面会介绍几个替代模版语法的场景。

案例

v-if

渲染函数中使用了三目运算符实现了 v-if 的效果

v-for

渲染函数使用了 map 方法代替了 v-for 的效果，也可以看出 h 函数的子节点也可以是一个 VNode

v-on

在渲染函数中，h 函数的 props 以 on 开头并跟着大写字母会被当作事件监听器。点击 click 按钮就会执行 test 方法。

结论

渲染函数在替代模版语法过程中，没有创造新的语法结构，而是直接使用了原生 javascript 的能力，再加上 h 函数的灵活使用能力，使得开发者可以很快从模版语法转移到渲染函数。

参考文档：Vue3 中文官网