為什么需要虛擬DOM？

如果對前端工作進行抽象的話，主要就是維護狀態(tài)和更新視圖，而更新視圖和維護狀態(tài)都需要DOM操作。其實近年來，前端的框架主要發(fā)展方向就是解放DOM操作的復雜性。

運行js的速度是很快的，大量的操作DOM就會很慢，時常在更新數(shù)據(jù)后會重新渲染頁面，這樣造成在沒有改變數(shù)據(jù)的地方也重新渲染了DOM 節(jié)點，這樣就造成了很大程度上的資源浪費。

在jQuery出現(xiàn)以前，我們直接操作DOM結(jié)構(gòu)，這種方法復雜度高，兼容性也較差。有了jQuery強大的選擇器以及高度封裝的API，我們可以更方便的操作DOM，jQuery幫我們處理兼容性問題，同時也使DOM操作變得簡單。

但是聰明的程序員不可能滿足于此，各種MVVM框架應運而生，有angularJS、avalon、vue.js等，MVVM使用數(shù)據(jù)雙向綁定，使得我們完全不需要操作DOM了，更新了狀態(tài)，視圖會自動更新。更新了視圖數(shù)據(jù)狀態(tài)也會自動更新，可以說MVVM使得前端的開發(fā)效率大幅提升。但是其大量的事件綁定使得其在復雜場景下的執(zhí)行性能堪憂，有沒有一種兼顧開發(fā)效率和執(zhí)行效率的方案呢？由此引入Virtual DOM(虛擬DOM）。

利用在內(nèi)存中生成與真實DOM與之對應的數(shù)據(jù)結(jié)構(gòu)，這個在內(nèi)存中生成的結(jié)構(gòu)稱之為虛擬DOM 。

當數(shù)據(jù)發(fā)生變化時，能夠智能地計算出重新渲染組件的最小代價并應用到DOM操作上。

Virtual DOM 算法

所謂的 Virtual DOM 算法。包括幾個步驟：

1.用 JavaScript 對象結(jié)構(gòu)表示 DOM 樹的結(jié)構(gòu)；然后用這個樹構(gòu)建一個真正的 DOM 樹，插到文檔當中；

2.當狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異；

3.把2所記錄的差異應用到步驟1所構(gòu)建的真正的DOM樹上，視圖就更新了。

Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個緩存。可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存。

既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內(nèi)存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）。

所謂的virtual dom，也就是虛擬節(jié)點。它通過js的Object對象模擬DOM中的節(jié)點，然后再通過特定的render方法將其渲染成真實的DOM節(jié)點 dom。diff 則是通過JS層面的計算，返回一個patch對象，即補丁對象，在通過特定的操作解析patch對象，完成頁面的重新渲染。

比較兩棵虛擬DOM樹的差異

比較兩棵DOM樹的差異是 Virtual DOM 算法最核心的部分，這也是所謂的 Virtual DOM 的 diff 算法。

兩個樹的完全的 diff 算法是一個時間復雜度為 O(n^3) 的問題。但是在前端當中，你很少會跨越層級地移動DOM元素。所以 Virtual DOM 只會對同一個層級的元素進行對比：

上面的div只會和同一層級的div對比，第二層級的只會跟第二層級對比。這樣算法復雜度就可以達到 O(n)。

在實際的代碼中，會對新舊兩棵樹進行一個深度優(yōu)先的遍歷，這樣每個節(jié)點都會有一個唯一的標記，如下圖所示：

Virtual DOM 算法實現(xiàn)

Virtual DOM 算法得實現(xiàn)主要是用三個函數(shù)：element，diff，patch。然后就可以實際的進行使用，如下面代碼所示：

// 1. 構(gòu)建虛擬DOMvar tree = el(’div’, {’id’: ’container’}, [ el(’h1’, {style: ’color: blue’}, [’simple virtal dom’]), el(’p’, [’Hello, virtual-dom’]), el(’ul’, [el(’li’)])])// 2. 通過虛擬DOM構(gòu)建真正的DOMvar root = tree.render()document.body.appendChild(root)// 3. 生成新的虛擬DOMvar newTree = el(’div’, {’id’: ’container’}, [ el(’h1’, {style: ’color: red’}, [’simple virtal dom’]), el(’p’, [’Hello, virtual-dom’]), el(’ul’, [el(’li’), el(’li’)])])// 4. 比較兩棵虛擬DOM樹的不同var patches = diff(tree, newTree)// 5. 在真正的DOM元素上應用變更patch(root, patches)

diff算法

用 三大策略 將O(n^3)復雜度 轉(zhuǎn)化為 O(n)復雜度

Web UI中DOM節(jié)點跨層級的移動操作特別少，可以忽略不計。

擁有相同類的兩個組件 生成相似的樹形結(jié)構(gòu)，擁有不同類的兩個組件 生成不同的樹形結(jié)構(gòu)。

對于同一層級的一組子節(jié)點，通過唯一id區(qū)分。

tree diff

（1）通過updateDepth對Virtual DOM樹進行層級控制。（2）對樹分層比較，兩棵樹只對同一層次節(jié)點進行比較。如果該節(jié)點不存在時，則該節(jié)點及其子節(jié)點會被完全刪除，不會再進一步比較。（3）只需遍歷一次，就能完成整棵DOM樹的比較。

diff只簡單考慮同層級的節(jié)點位置變換，如果是跨層級的話，只有創(chuàng)建節(jié)點和刪除節(jié)點的操作。

如上圖所示，以A為根節(jié)點的整棵樹會被重新創(chuàng)建，而不是移動，因此官方建議不要進行DOM節(jié)點跨層級操作，可以通過CSS隱藏、顯示節(jié)點，而不是真正地移除、添加DOM節(jié)點。

以上就是vue 虛擬DOM的原理的詳細內(nèi)容，更多關于vue 虛擬DOM的資料請關注好吧啦網(wǎng)其它相關文章！