一起理解 Virtual DOM
詳解Vue中的虛擬DOM
前言
Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，並大大降低了內存消耗。那麼，什麼是Virtual DOM？爲什麼需要Virtual DOM？它是通過什麼方式去提升頁面渲染效率的呢？這是本文所要探討的問題。
模板轉換成視圖的過程
在正式介紹 Virtual Dom之前，我們有必要先了解下模板轉換成視圖的過程整個過程（如下圖）：
- Vue.js通過編譯將template 模板轉換成渲染函數(render ) ，執行渲染函數就可以得到一個虛擬節點樹
- 在對 Model 進行操作的時候，會觸發對應 Dep 中的 Watcher 對象。Watcher 對象會調用對應的 update 來修改視圖。這個過程主要是將新舊虛擬節點進行差異對比，然後根據對比結果進行DOM操作來更新視圖。
簡單點講，在Vue的底層實現上，Vue將模板編譯成虛擬DOM渲染函數。結合Vue自帶的響應系統，在狀態改變時，Vue能夠智能地計算出重新渲染組件的最小代價並應到DOM操作上。
我們先對上圖幾個概念加以解釋:
- 渲染函數：渲染函數是用來生成Virtual DOM的。Vue推薦使用模板來構建我們的應用界面，在底層實現中Vue會將模板編譯成渲染函數，當然我們也可以不寫模板，直接寫渲染函數，以獲得更好的控制。
- VNode 虛擬節點：它可以代表一個真實的 dom 節點。通過 createElement 方法能將 VNode 渲染成 dom 節點。簡單地說，vnode可以理解成節點描述對象，它描述了應該怎樣去創建真實的DOM節點。
- patch(也叫做patching算法)：虛擬DOM最核心的部分，它可以將vnode渲染成真實的DOM，這個過程是對比新舊虛擬節點之間有哪些不同，然後根據對比結果找出需要更新的的節點進行更新。這點我們從單詞含義就可以看出， patch本身就有補丁、修補的意思，其實際作用是在現有DOM上進行修改來實現更新視圖的目的。Vue的Virtual DOM Patching算法是基於Snabbdom的實現，並在些基礎上作了很多的調整和改進。
Virtual DOM 是什麼？