讲render函数前，先讲下为什么有这个东西。先要从Vue在为我们干什么说起：Vue帮助我们做数据和dom的动态绑定。
浏览器有dom树，而每个Vue实例都会负责把它管辖的数据和它管辖的dom范围动态绑定起来，可以说每一个Vue实例都是一个小中介或者小代理，它会“知道”自己对应到dom树上最终应该是什么内容。
那么，Vue实例怎么知道它对应到dom树上应该是什么内容呢？我们一般用模板语法写一些标签来定义。
但有些情况下，用模板语法表达不够简洁（比如官网给了个例子https://cn.vuejs.org/v2/guide/render-function.html），你可能会希望有其它方式来定义Vue实例的渲染逻辑。
所以Vue提供了render函数。
render函数接收一个createElement参数。通过createElement来创造虚拟节点，VNode（就是说我们用模板语法或者render函数指定了一层层元素，每个元素都还不是真实的dom元素，虽然看起来就像是，我们指定出来的东西叫虚拟节点）。
所以render函数最主要的就是对createElement方法的运用。
createElement接收3个参数：
1.必填参数，表示虚拟节点的内容。
值类型：{String | Object | Function}
一个 HTML 标签名、组件选项对象，或者resolve 了两者中任何一种的一个 async 函数。
2.选填参数，表示VNode数据对象
3.选填参数，表示子级虚拟节点。值类型{String | Array}
什么意思呢？假如对应到平时惯用的模板语法的话，第一个参数就相当于我们用模板语法写标签的标签名；第二个参数就相当于我们给这个标签加的属性（包括原生的html属性也包括自定义的组件属性）、指令等等；第三个参数指定这个“标签”内有没有一些“子元素”。
第二个参数，也就是VNode数据对象，仔细看里边的内容就会发现自己平时常用的Vue实例属性只是很小的一部分，实际上人家提供的可控制的内容很丰富，嗯我还发现我不知道dom元素property和attribute的区别。。。
说回createElement方法，当时看完参数解释，天真的我直接就迷惑了，为什么这个createElement方法只告诉我怎么定义元素本身和它的子元素呢？平时开发过程中哪个组件没个五六七八层嵌套啊，我想定义更下层的元素怎么办？？？后来我终于想通了，谁说render函数里的createElement方法只能调一次啊，在第3个参数里定义子级虚拟节点的时候，同样可以再用createElement方法定义子级虚拟节点的子节点。
然后进行一些尝试：
先用vue-cli创建了一个项目。vue-cli一开始写了个HelloWorld组件引入到根组件，我把它换成我自己写的试验组件。
myComp.js：
export default {
render(createElement) {
return createElement('p', ['一些尝试', createElement('a', '链接链接链接')])
}
}
然后上官网示例，把myComp.js改成：
// 把给定的一组dom元素“摊开”成字符串，“摊开”指的是元素有子节点就取子节点的text，无则取元素本身的text。把这个递归过程中取到的text拼在一起。
function getChildrenTextContent (children) {
return children.map(function (node) {
return node.children
? getChildrenTextContent(node.children)
: node.text
}).join('')
}
export default {
render: function (createElement) {
// 创建 kebab-case 风格的 ID
var headingId = getChildrenTextContent(this.$slots.default)
.toLowerCase()
.replace(/\W+/g, '-')
.replace(/(^-|-$)/g, '')
return createElement( // 第一层，h*元素，具体是h1/h2/h3/h4/h5哪一个由传入的level决定
'h' + this.level,
[
createElement('a', { // 第二层，a链接
attrs: {
name: headingId,
href: '#' + headingId
}
}, this.$slots.default) // 第三层，父组件给入的slot
]
)
},
props: {
level: {
type: Number,
required: true
}
}
}
App.Vue也稍作改动：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<my-comp :level="3">
<!-- 多弄几层看看那个getChildrenTextContent方法的处理结果 -->
<span>sp1</span>
<p>p1</p>
text1
<table>
<tr>
<td>grid1</td>
<td>grid2</td>
<td><img/></td>
</tr>
</table>
</my-comp>
</div>
</template>
<script>
import MyComp from './components/MyComp'
export default {
name: 'App',
components: {
MyComp
}
}
</script>
