Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM
因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h，vm中有一个方法_c,也是这个函数的别名。
render是为补救template缺点而诞生的，template是有标签，根据标签插值内容，render厉害一点，可以渲染标签，并添加到虚拟DOM中。
注意下：
1，template是模板语法，而render是js语法，render其实是用来生成模板；
2，render用多了，发现挺麻烦，有一个插件jsx可以让render代码写得更自在
参考理解：https://www.jianshu.com/p/b7dd8db354bf
简单使用：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<child :level=1>hello Vue</child>
<child :level=6>
<span slot="footer">span</span>
<p slot="header">header slot<span>span</span></p>
</child>
</div>
<script src="node_modules/vue/dist/vue.js"></script>//使用时改为自己的vue路径
<script>
Vue.component('child', {
render:function(createElement) {
return createElement('h'+this.level, {
'class': {
foo:true,
bar:true
},
style: {
color:"red"
},
attrs: {
id:'foo',
'data-id':'bar'
},
domProps: {
//
},
on: {
click:this.clickit
},
},
[this.$slots.default]
)
},
template:'<div v-if="level===1"><slot></slot></div>',
props: {
level: {
type: Number,
required:true
}
},
methods: {
clickit:function() {
console.log('click')
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
</html>
