一、前言
首先，我猜你在点开我这篇文章之前99%是在官网先看了一遍文档的，下面谈谈我个人的理解, render 函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数，下面就把我实践的心得分享一下，本文建议配合官方文档阅读。
二、实践
我们就拿官网那个例子说，这个组件可以根据父级组件给他传递的level来渲染h1还是h6，代码如下：
<template>
<div><h1 v-if="level === 1"><slot></slot></h1><h2 v-else-if="level === 2"><slot></slot></h2><h3 v-else-if="level === 3"><slot></slot></h3><h4 v-else-if="level === 4"><slot></slot></h4><h5 v-else-if="level === 5"><slot></slot></h5><h6 v-else-if="level === 6"><slot></slot></h6>
</div>
</template><script>
export defalut {// 接收父组件传来的 levelprops: {level: {type: Number,required: true}}
}
</script>这种场景确实不多，但是也会遇到，比如现在有6种不同的状态，用1，2,3,4,5,6表示。我们要通过这些状态展示不同的图片，如果后台不给你返回图片地址只返回状态对应的数字（图片放在本地），用render函数在合适不过了（前提是状态有很多，2、3个就算了）。下面是render函数重写上面的组件：
export default {render: function (createElement) { // createElement可以写成h，这是公认写法// createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数。/*这里说明它的三个参数：1、一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：{String | Object | Function}。必需。2、一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型：{Object}。可选。3、子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：{String | Array}。可选。*/return createElement(// 参数1、标签名称，父组件传几，我这就是h几，不用再template上面加if，else了是不是很简洁实用？（必填）'h' + this.level, // 参数2、这里相当于给标签加属性 例如：<div class='foo' style='color:red,font-size: 14px'></div>（可选）{// 与 `v-bind:class` 的 API 相同，// 接受一个字符串、对象或字符串和对象组成的数组'class': {foo: true,bar: false},// 与 `v-bind:style` 的 API 相同，// 接受一个字符串、对象，或对象组成的数组style: {color: 'red',fontSize: '14px'},},// 参数3、参数中渲染的标签的子元素数组（可选）['text', // 文本节点直接写就可以_this.$slots.default, // 所有不具名插槽，是个数组createElement('div', _header) // createElement()创建的VNodes])},// 接收父组件传来的 levelprops: {level: {type: Number,required: true}}
}当然createElement的第一个参数也可以是组件，vue的强大真的不是盖的，vue的真实dom是tamplate转成createElement的形式来进行渲染的。如果你用render函数，就可以免去编译这一步骤，当然render函数的语法还是有缺点，需要加入jsx来弥补，这就有点像react了。话不多说，render方面就介绍这么多，感谢观看！