Vue2.0采用了虛擬DOM來代替對真實DOM的操作棘劣，最后通過某種機制來完成對真實DOM的更新赋兵，渲染視圖拢蛋。
所謂的虛擬DOM桦他，其實就是用JS來模擬DOM結(jié)構(gòu)，把DOM的變化操作放在JS層來做谆棱，盡量減少對DOM的操作快压。然后對比前后兩次的虛擬DOM的變化圆仔，只跟更新渲染變化了的部分，而沒有變化的部分則不會重新渲染蔫劣。
比如我們有如下的DOM結(jié)構(gòu)：
<ul id="list">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
</ul>
我們可以用JS對象模擬上面的DOM結(jié)構(gòu)坪郭，模擬后就會變成下面的結(jié)構(gòu)：
var vdom = {
tag: 'ul',
attr: {
id: 'list',
},
children: [
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 1']
},
},
{
tag: 'li',
attrs: {
className: 'item',
children: ['Item 2']
}
}
]
}
注意：JS模擬的DOM結(jié)構(gòu)并沒有模擬所有DOM節(jié)點上的屬性、方法（因為DOM節(jié)點本身的屬性非常多脉幢，這只是Dom操作耗性能的餓一個點）歪沃，而是只模擬了一部分和數(shù)據(jù)相關(guān)的屬性和方法。
怎么使用虛擬DOM
Vue在2.0版本引入了vdom嫌松，其vdom是基于snabbdom庫所做的修改沪曙。snabbdom是一個開源的vdom庫。snabbdom的主要作用就是將傳入的JS模擬的DOM結(jié)構(gòu)轉(zhuǎn)換成虛擬的DOM節(jié)點豆瘫。先通過其中的h函數(shù)將JS模擬的DOM結(jié)構(gòu)珊蟀，轉(zhuǎn)換成虛擬DOM之后，再通過其中的patch函數(shù)將虛擬DOM轉(zhuǎn)成真實的DOM渲染到頁面中外驱。
為了保證頁面的最小渲染育灸，snabbdom引入了Diff算法，通過Diff算法找出前后兩個虛擬DOM之間的差異昵宇，只更新改變了的DOM節(jié)點磅崭，而不是重新渲染為改變的DOM節(jié)點。
- snabbdom中兩個核心API功能
h()函數(shù)：將傳入的JS模擬的DOM結(jié)構(gòu)模板轉(zhuǎn)換成vnode瓦哎。（vnode是一個純JS對象）砸喻；
patch()函數(shù)：將虛擬的DOM節(jié)點渲染到頁面中。
下面我們來看一個實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewportcontent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change"``>change</button>
<script src="[https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js](https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js)"></script>
<script src="[https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js](https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js)"></script>
<script src="[https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js](https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js)"></script>
<script src="[https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js](https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js)"></script>`
<script src="[https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js](https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js)"></script>
<script src="[https://cdn.bootcss.com/snabbdom/0.7.1/h.js](https://cdn.bootcss.com/snabbdom/0.7.1/h.js)"></script>
<script>
//定義patch函數(shù)`
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
//定義h函數(shù)
var h = snabbdom.h;
//生成一個vnode
var vnode = h('ul#list',{},[
h('li.item',{},['Item 1']),
h('li.item',{},['Item 2']),
])
//console.log(vnode);
//獲取container
var container = document.getElementById('container');
patch(container,vnode);//初次渲染
var btn = document.getElementById('btn-change');
btn.onclick = function() {`
var newVnode = h('ul#list',{},[
h('li.item',{},['Item 1']),
h('li.item',{},['Item B']),
h('li.item',{},['Item 3']),
])
patch(vnode,newVnode);//再次渲染
vnode = newVnode;//將修改后的newVnode賦值給vnode
}
</script>
</body>
</html>
思路分析
- 我們先通過h函數(shù)創(chuàng)建一個虛擬DOM節(jié)點蒋譬，通過patch函數(shù)將虛擬DOM渲染到頁面割岛。
*點擊btn按鈕時，更新ul#list列表的數(shù)據(jù)犯助，改變了第二個li元素的值并且新增了一個li元素癣漆，第一個li元素的值并沒有改變。我們再次通過patch函數(shù)將更新后的數(shù)據(jù)渲染到頁面上剂买』菟可以看到只有第二個和第三個li發(fā)生了更新，而第一個li由于沒有改變瞬哼，并沒有重新渲染婚肆。
Vue中的模板解析和渲染的核心就是：通過類似snabbdom的h()和patch()的函數(shù)，現(xiàn)將模板解析成vnode坐慰，如果是初次渲染较性，則通過patch(container,vnode)將vnode渲染至頁面，如果是二次渲染，則通過patch(vnode,newNode)赞咙，先通過Diff算法比較原vnode和newNode的差異永毅，以最小的代價重新渲染頁面。
