vue中的虛擬DOM原理

1、定義：

虛擬DOM其實就是一棵以 JavaScript 對象( VNode 節點)作爲基礎的樹，用對象屬性來描述節點， 實際上它只是一層對真實 DOM 的抽象。最終可以通過一系列操作使這棵樹映射到真實環境上。

相當於在js與DOM之間做了一個緩存，利用patch（diff算法）對比新舊虛擬DOM記錄到一個對象中按需更新， 最後創建真實的DOM

2、虛擬dom原理流程

模板 ==> 渲染函數 ==> 虛擬DOM樹 ==> 真實DOM

• vuejs通過編譯將模板（template）轉成渲染函數（render），執行渲染函數可以得到一個虛擬節點樹

• 在對 Model 進行操作的時候，會觸發對應 Dep 中的 Watcher 對象。Watcher 對象會調用對應的 update 來修改視圖。

圖解：

• 渲染函數： 渲染函數是用來生成Virtual DOM的。
• VNode虛擬節點： 它可以代表一個真實的dom節點。通過 createElement 方法能將 VNode 渲染成 dom 節點。簡單地說，vnode可以理解成節點描述對象，它描述了應該怎樣去創建真實的DOM節點
• patch(也叫做patching算法)： 虛擬DOM最核心的部分，它可以將vNode渲染成真實的DOM，這個過程是對比新舊虛擬節點之間有哪些不同，然後根據對比結果找出需要更新的的節點進行更新

3、虛擬DOM好處

• 具備跨平臺的優勢–由於 Virtual DOM 是以 JavaScript 對象爲基礎而不依賴真實平臺環境，所以使它具有了跨平臺的能力，比如說瀏覽器平臺、Weex、Node 等。
• 操作 DOM 慢，js運行效率高。我們可以將DOM對比操作放在JS層，提高效率。運用patching算法來計算出真正需要更新的節點，最大限度地減少DOM操作，從而顯著提高性能。Virtual DOM 本質上就是在 JS 和 DOM 之間做了一個緩存。
• 提升渲染性能 Virtual DOM的優勢不在於單次的操作，而是在大量、頻繁的數據更新下，能夠對視圖進行合理、高效的更新
• 虛擬DOM就是爲了解決瀏覽器性能問題而被設計出來的