前言

用vue已經比較久了，也是總是會接觸到VDOM，但是一直有點不太理解為什麼要這麼設計，於是稍微學習記錄一下。

參考文章：https://www.jianshu.com/p/bef1c1ee5a0e

更新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效能都比較低。