為什么Vue.js使用VDOM？

Question

根據Vue.js的文檔 ，它正在使用引擎蓋下的VDOM來呈現UI。 根據我的理解，VDOM主要是為了避免“跟蹤依賴”而發明的。 使用VDOM，可以在不知道確切更改的情況下協調應用程序的更大部分。 因此，可以使用普通對象和數組來描述視圖，只需要通知框架有關更改（如React中的setState ）。 然后，比較兩個VDOM樹，並將最小的所需更改集應用於真實DOM。

另一方面，Vue.js使用跟蹤的依賴關系。 它確切地知道發生了什么變化，因此可以使用DOM綁定。 此外，由於大多數Vue.js用戶已經在使用模板語言，因此VDOM提供的更大靈活性並沒有真正受益。 那么為什么Evan決定使用VDOM？

Answer 1

這個設計決定有幾個方面。

1. 可維護性和靈活性。 直接DOM綁定（如在Vue 1.x中）對於單個綁定確實有效且簡單，但在涉及列表時則不是那么多。 當涉及組成時（例如，插槽機制），它變得更加復雜。 對於每種這樣的特征（涉及片段的組合），需要編寫專用的有狀態代碼，它們可能相互影響，使系統更難維護。 使用VDOM將最終的DOM操作與要素層完全分離 - 現在，要素代碼通過聲明性地組合VNode，使維護和添加新功能變得更加容易。

   此外，VDOM的這種靈活性也可以通過允許它們繞過模板並直接創作渲染功能來向用戶公開。

2. VDOM差異並不是免費的 - 事實上，當你在大型組件樹的根目錄下設置setState()時，它可能會非常昂貴。 這就是為什么在React中你需要使用PureComponent或實現shouldComponentUpdate來繞過組件樹的一部分。 通過dep跟蹤系統，我們可以自動且更准確地檢測需要更新的組件，因此即使VDOM也可以從dep跟蹤系統中受益。

3. 依賴性跟蹤也有其成本 - 對於每個綁定，它需要為跟蹤的依賴項分配內存。 超細粒度綁定意味着應用程序中將有成千上萬的被動觀察者，導致額外的內存使用。 跟蹤系統的精確程度取決於我們正在構建的應用程序類型。 基於對典型應用程序結構的觀察，Vue 2通過跟蹤每個組件的依賴性來使用某種“中等粒度”策略，從而使每個組件成為反應性更新邊界。

所以 - 結合兩者我們得到雙方的好處:)