vue 2.x和1.x的最大不同在于使用了Virtual Dom（虚拟DOM）来更新DOM节点，提升了渲染性能
Virtual DOM
不是真正意义上的DOM对象，而是一个轻量级Js对象，状态发生变化的时候，会进行Diff运算，来更新只需要被替换的DOM，而不是全部重载
下面是一个普通的DOM节点
<div id="main"><p>文本内容</p><p>文本内容</p>
</div>
下面是使用Virtual DOM创建的JS对象 //virtual的中文意思是虚拟的（计算机）
var vNode = {tag:'div',attributes:{id:'main'},children:[//p节点]
}
vNode对象通过一些特定的选项描述了真实的DOM结构
Render函数
大部分网站文章会区分一级标题、二级标题…为了方便分享url，他们都做成了锚点，点击一下会将内容加在网址后面，以“#”分割。
在一些比较冗长又重复的的分级代码中，使用render函数可以简化代码
render:function(createElement){return createElement('h' + this.level,[createElement{'a',{domProps:{href:'#' + this.title}},this.$slots.defalut)])
}
Render函数通过createElement参数来创建Virtual Dom，结构精简了很多
createElement是学习render的重点
基本参数
createElement构成了Vue Virtual Dom的模板，他有3个参数
createElement（//{String|Object|Function}//一个html标签，组件选项，或一个函数//必须Return上述一个 ------------1'div',//{object}//一个对应属性的数据对象，可选//可以在template中使用 ----------2{}，//{String|Array}//子节点,可选 -------3[createElement('h1','hello world'),createElement(MyComponent,{props:{someProp:'foo'}}),'bar'])
解析：第一个参数必选，他可以是一个html标签，也可以是一个组件或者函数，第二个是可选参数，数据对象，在template中使用。第三个是子节点，也是可选参数
第二个参数 '数据对象‘’ ，具体的选项如下：
{//和v-bind：class一样的API‘class’：{foo:true,bar:false},//和v-bind：style一样的APIstyle：{color:'red',fontSize:'14px'},//正常的html特性attrs：{id:'foo'},//组件propsprops：{myProp：‘bar’}，//DOM属性domProps{innerHTML：‘baz’}，//自定义事件监听器“on”//不支持如v-on：keyup.enter的修饰器//需要手动匹配keyCodeon：{click：this.clickHandler}，//自定义指令directives：[{name:'my-custom-directive',value:'2'expression:'1+1',arg:'foo',modifiers:{bar:true}}],//作用域slot//{ name：props => VNode|Array<VNode>}scopedSlots：{defalut：props =>h('span',props.text）}，//如果子组件有定义slotslot：‘name-of-slot’//其他特殊顶层属性key:'myKey',ref:'myRef'
}
在之前的template中，我们都是在组件的标签上使用形如v-bind：class、v-bind:style、v-on:click
这样的指令，但是在render函数中，他是将他们都写在了数据对象里面
render不是百分百适用的，看场景选择合适的