1、為什麼需要虛擬DOM
前面我們從零開始寫了一個簡單的類Vue框架(文章連結),其中的模板解析和渲染是通過Compile函式來完成的,採用了文件碎片代替了直接對頁面中DOM元素的操作,在完成資料的更改後通過appendChild函式將真實的DOM插入到頁面。
雖然採用的是文件碎片,但是操作的還是真實的DOM。
而我們知道操作DOM的代價是昂貴的,所以vue2.0採用了虛擬DOM來代替對真實DOM的操作,最後通過某種機制來完成對真實DOM的更新,渲染檢視。
所謂的虛擬DOM,其實就是用JS來模擬DOM結構,把DOM的變化操作放在JS層來做,儘量減少對DOM的操作(個人認為主要是因為操作JS比操作DOM快了不知道多少倍,JS執行效率高)。然後對比前後兩次的虛擬DOM的變化,只重新渲染變化了的部分,而沒有變化的部分則不會重新渲染。
比如我們有如下的DOM結構。
<ul id="list"> <li class="item1">Item 1</li> <li class="item2">Item 2</li> </ul>
我們完全可以用JS物件模擬上面的DOM結構,模擬後就會變成下面的這種結構。
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結構並沒有模擬所有DOM節點上的屬性、方法(因為DOM節點本身的屬性非常多,這也是DOM操作耗效能的一個點),而是隻模擬了一部分和資料操作相關的屬性和方法。
2、怎麼使用虛擬DOM
Vue
在2.0
版本引入了vdom
。其vdom
是基於snabbdom庫所做的修改。snabbdom是一個開源的vdom庫。
snabbdom的主要作用就是將傳入的JS模擬的DOM結構轉換成虛擬的DOM節點。
先通過其中的h函式將JS模擬的DOM結構轉換成虛擬DOM之後,再通過其中的patch函式將虛擬DOM轉換成真實的DOM渲染到頁面中。
為了保證頁面的最小化渲染,snabbdom引入了Diff演算法,通過Diff演算法找出前後兩個虛擬DOM之間的差異,只更新改變了的DOM節點,而不重新渲染為改變的DOM節點。
在這裡我不打算分析snabbdom的原始碼來解釋到底snabbdom是怎麼幹成這件事的(主要是現階段沒到那個水平,哈哈。再者已經有很多同學做過類似的分析,相關連結附在文章末尾)。
我會從snabbdom的使用角度來看Vue中的虛擬DOM是如何完成檢視渲染的。
我們先看一下snabbdom中兩個核心API的功能。
- h()函式:將傳入的JS模擬的DOM結構模板轉換成vnode。(vnode是一個純JS物件)
- patch()函式:將虛擬的DOM節點渲染到頁面中。
我們提供一個例項來看一下snabbdom的實際作用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="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> <!-- 引入snabbdom庫,先不必糾結為什麼這樣引入,以及每個檔案的作用。本篇文章只是介紹一下虛擬DOM的工作方式,並不涉及原理解析 主要是因為博主目前功力尚淺,有興趣的小夥伴可以另行研究 --> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script> <script src="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"></script> <script src="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"></script> <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script> <script> //定義patch函式 var patch = snabbdom.init([ snabbdom_class, snabbdom_props, snabbdom_style, snabbdom_eventlisteners ]) //定義h函式 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函式建立一個虛擬DOM節點,通過patch函式將虛擬DOM渲染到頁面。
- 點選btn按鈕時,更新ul#list列表的資料,改變了第二個li元素的值並且新增了一個li元素,第一個li元素的值並沒有改變。我們再次通過patch函式將更新後的資料渲染到頁面上。可以看到只有第二個和第三個li發生了更新,而第一個li由於沒有改變,並沒有重新渲染。
vue中的模板解析和渲染的核心就是:通過類似snabbdom的h()和patch()的函式,先將模板解析成vnode,如果是初次渲染,則通過patch(container,vnode)將vnode渲染至頁面,如果是二次渲染,則通過patch(vnode,newVnode),先通過Diff演算法比較原vnode和newVnode的差異,以最小的代價重新渲染頁面。