何為Virtual DOM（VDOM）
前言
用vue已經比較久了，也是總是會接觸到VDOM，但是一直有點不太理解為什麼要這麼設計，於是稍微學習記錄一下。
更新DOM的三種方式
1、重新載入，全域性重新整理 2、單個DOM節點有變化就更新 3、使用VDOM，更新介面中變化的節點
1、重新載入，全域性重新整理
頁面中的資料發生了變化，就重新請求頁面，把整個DOM重新整理一遍。
優點：簡單。
缺點：對效能影響比較大。假設我介面中只有一個DOM節點有變化，卻需要重新家在介面重新整理整個DOM，顯然價效比很低。
2、單個DOM節點有變化就更新
開發者藉助框架，監聽資料的變更，在資料變更後更新對應的 DOM 節點。
優點：在更新的節點比較少的情況下價效比很高，不需要重新載入介面重新整理整個DOM。
缺點：在更新的節點比較多的情況下價效比很低，更新多少個節點就要操作DOM多少次，還不如直接重新載入介面。
3、使用VDOM，更新介面中變化的節點
初始渲染時，首先將資料渲染為 Virtual DOM，然後由 Virtual DOM 生成 DOM。
資料更新時，渲染得到新的 Virtual DOM，與上一次得到的 Virtual DOM 進行 diff，得到所有需要在 DOM 上進行的變更，然後在 patch 過程中應用到 DOM 上實現UI的同步更新。
優點：可以算是第二種方式的優化，在有多個節點需要重新整理的情況下，由於通過查詢VDOM的diff來一次更新，所以只需要操作一次DOM。
缺點：相比前兩種方式，對開發者的要求更高，需要了解控制更新DOM的時機。在筆者vue的開發中經常碰到介面沒有即使更新的情況。
典型場景對比
以下場景僅僅侷限於一般情況，特殊場景可能並非如下所說，讀者需要自行選擇接受。
一、DOM中有10000個節點，有1個節點需要更新。
1、直接重新載入介面，重新整理DOM。 2、節點被修改後直接更新，操作DOM 1次。 3、通過VDOM對比diff更新DOM，操作DOM 1次。
效能: 2>3>1
二、DOM中有10000個節點，有1000個節點需要更新。
1、直接重新載入介面，重新整理DOM。 2、節點被修改後直接更新，操作DOM 1000次。 3、通過VDOM對比diff更新DOM，操作DOM 1次。
效能: VDOM效能最高，1和2效能都比較低。