render是渲染的意思。有render选项，也有render函数，render函数指的是可以创建虚拟DOM的函数。

定义

先来看看render选项在Vue3官方API的位置吧；

可以看到render是选项式API中的一个API（vue2写法），且与template处于同级。
template是用于声明组件的字符串模板，render 是字符串模板的一种替代，是用于编程式地创建组件虚拟 DOM 树的函数。单文件组件中的模板（即template），在构建时最终也会被被编译为 render 选项。
因此，如果是通过 template 选项提供的模板，必须引入包含模板编译器的完整版 Vue 构建版本；如果是通过render选项提供的模板，只需要引入runtime版本的构建版本。
如果render 与template选项同时存在于该组件中，template 选项将被忽略。

使用template选项声明模板：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> 
<div id="app"></div> 
<script> 
    new Vue({ 
    el: '#app', 
    data: { message: 'Hello Vue!' }, 
    template: '<div>{{ message }}</div>' }) 
</script>

使用render选项声明模板：

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.runtime.js"></script> 
<div id="app"></div> 
<script> 
    new Vue({ 
    el: "#app", 
    data: { message: "Hello Vue!" },
    render: function (createElement) { 
        return createElement('div', this.message) 
        }
    });
</script>

render选项：

render选项类型：(createElement: () => VNode) => VNode``(createElement: () => VNode) => VNode
此处的入参createElement就是渲染函数。
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例。h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力。

render函数：

render函数指的是可以创建虚拟DOM的函数。

Vue2中通过render属性的参数暴露出来render函数：createElement()
Vue3中直接暴露出来render函数： h() 函数，可以直接从Vue中导入使用

使用

Vue2写法

render选项：该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

// runtime版本vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.runtime.js"></script> 
<div id="app"></div> 
<script> 
new Vue({ 
    el: '#app', 
    data: { message: 'Hello Vue!' }, 
    render: function (createElement) { 
        return createElement('div', this.message) 
        } 
    }) 
</script>

Vue3写法

setup返回渲染函数h：请确保返回的是一个函数而不是一个值！

import { ref, h } from 'vue' 
export default { 
    props: { 
    /* ... */ 
    }, 
setup(props) { 
    const count = ref(1) 
    // 返回渲染函数 
    return () => h('div', props.msg + count.value) 
    } 
}

vue render选项，render函数傻傻分不清

定义

render选项：

render函数：

使用

Vue2写法

Vue3写法