这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
template：
可以传入字符串，vue通过给的字符串生成render函数进行虚拟dom的编译。
那从template到render都做了些什么呢? 1. 通过编译器把template编译成Ast（抽象语法树） 2. 优化AST，解析成可以用的html 3. 转换成render方法
Render():
当你在vue实例中，同时定义了template和render函数的时候，render函数的会更先被执行，render的优先级更。
render函数的使用：
说在前面： Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码： return createElement('h1', this.blogTitle)
createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。
1.使用render的时候可以使用方法返回一个createELement（标签名，标签属性attribute,子虚拟节点）
2.使用 JavaScript 代替模板功能，对于我们直接用的v-if和v-for等指令，在render函数中就可以用if判断句和map函数进行代替。
3.约束：vnode必须是唯一的，如果你真的需要重复很多次的元素/组件，你可以使用工厂函数来实现。例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落：
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi') }) )
}
4.JSX.当我们的render函数写的很多的时候，往往写起来很复杂，而且可读性也变差，所以使用Babel插件知识jsx写法，就可以用h（）方法来直接进行模板语法编写。相当于代替了createElement
import AnchoredHeading from './AnchoredHeading.vue'
new Vue({
el: '#demo',
render: function (h) {
return ( <AnchoredHeading level={1}> <span>Hello</span> world! </AnchoredHeading> ) }
})
为什么用render： 当template模板字符串又多又冗余的时候，可以使用render函数进行直接构建虚拟节点，vue对这些虚拟节点的构建成虚拟DOM
