一、模板转换成视图的过程
- vue.js通过编译将template模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟节点树；
- 在对Model进行操作的时候，会触发对应Dep中的watcher对象。watcher对象会调用对应的update来修改视图。这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比结果进行DOM操作来更新视图。
二、Vitrual DOM是什么？
Vitrual DOM其实就是一颗以javascript对象作为基础的树，用对象属性来描述节点，实际上它只是一层对真实DOM的抽象。最终会通过一系列操作使这棵树反映到真实环境上。
Virtual DOM 可以理解为一个简单的JS 对象，并且至少包含标签名（tag）、属性（attrs）、子元素对象（children）三个属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let element={
tagName:'ul',//节点标签名
props:{//dom的属性，用一个对象存储键值对
id:'list'
},
children:[//该节点的子节点
{tagName:'li',props:{class:'item'},children:['aa']}，
{tagName:'li',props:{class:'item'},children:['bb']},
{tagName:'li',props:{class:'item'},children:['cc']}
]
}
对应的html写法是：
<ul id='list'>
<li class='item'>aa</li>
<li class='item'>bb</li>
<li class='item'>cc</li>
</ul>