一、前言
我刚在官网上研究了半天有关render的文档，我总结一下我个人的理解。 render 函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数，render函数更接近编译器。

配合官方文档，总结一下我的心得

二、render
拿官网的例子为例 ，通过父传子level，动态生成标题

虽然模板在大多时候很好用，但明显这个时候就不适合了，不但代码冗长，而且重复使用

这个时候就可以使用render函数

render: function (createElement) {
// createElement可以写成 h
// createElement 是 render 函数的参数，同时 createElement 本身也是一个函数
return createElement(
'h' + this.level, // 标签名称
style: { // 给标签添加属性
color: 'red',
fontSize: '14px'
},
this.$slots.default // 子节点数组
)
},
props: {
level: {
type: Number,
required: true
}
}
createElement 函数有三个参数：

参数1、标签名称，父组件传几，我这就是h几，不用再template上面加if，else了是不是很简洁实用？（必填）

参数2、这里相当于给标签加属性 例如：（可选）

参数3、参数中渲染的标签的子元素数组（可选）

当然createElement的第一个参数也可以是组件

三、编译
vue 中的真实 DOM 是 template 转成 createElement 的形式进行渲染的，原理如下：

template是通过compile编译器把template编译成AST语法树, AST在内部经过一些转化得到render函数，render的返回值是Vnode, VNode是Vue的虚拟DOM节点,若直接使用render函数则免去以上步骤

当然，render 也是有缺点的，如果要记住每个参数的用法，传参等，实在是有点麻烦了，这时就可以使用jsx来优化这个繁琐的过程。这就有点偏向react了