vue编译为render函数：模板编译过程

模板编译过程：模板编译为render函数，返回vnode。再执行diff和patch。

使用webpack，vue-loader,会在开发环境下编译模板。

虚拟dom和diff算法

1，将dom抽象为虚拟dom，diff算法对比新旧虚拟dom，只把变化的部分重新渲染。

2，diff算法是通过js层面的计算，返回一个patch补丁对象，之后解析这个patch对象，渲染到页面上。

因为传统的dom渲染慢，消耗性能。js在浏览器上运行快。

表示虚拟dom的js对象上有三个属性：tag(元素标签名)，props(元素属性)，children(元素下级-数组)

{ "tag":"div",props:{"color:":"red","id","id11"},children:[{}] }

diff算法规则

diff即比较。同层树节点进行比较。

1，只比较同意层级，不深度比较。

2，如tag不相同，则删掉重建。

3，如tag和key相同，则认为是相同节点，不在深度比较。

组件渲染/更新过程

1，初次渲染组件

1，解析模板为render函数。

      2，触发响应式，监听data属性（第一次只触发getter）

3，执行render函数，生成vnode，并执行patch。

2，更新组件

1，修改data触发setter。

2，重新执行render函数，生成newVnode，

3，执行patch(vnode,newVnode),diff算法更新视图。

3，异步渲染组件

$nextTick()是异步渲染组件，汇总data的修改，一次性更新视图。好处：减少dom操作次数，提高性能。