爲什麼Vue.js使用VDOM？

According to Vue.js' documentation，它使用引擎蓋下的VDOM來呈現UI。根據我的理解，VDOM主要是爲了避免「跟蹤依賴性」而發明的。藉助VDOM，可以調整應用程序的大部分內容，而不必知道究竟發生了什麼變化。因此，可以使用普通對象和數組來描述視圖，只需要通知框架有關更改（如React中的setState）。然後，將兩個VDOM樹進行比較，並將最小的所需更改集應用於真實DOM。爲什麼Vue.js使用VDOM？

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

來源

2017-05-29 Johannes Ewald

我猜虛擬域將在服務器端渲染幫助。您可以在這裏閱讀更多（https://vuejs.org/2016/04/27/announcing-2.0/） –

模板語言可以在不使用VDOM抽象的情況下進行服務器渲染。您只需將模板編譯爲返回字符串（或字符串流）的函數即可。 –

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

可維護性和靈活性。直接DOM綁定（如Vue 1.x中）對於單個綁定確實高效且直接，但涉及到列表時並非如此。當涉及組合時（例如插槽機制），它變得更加複雜。對於每一種這樣的特徵（涉及片段的組合），需要編寫特殊用途的有狀態代碼，它們可能會相互影響，使系統難以維護。使用VDOM乾淨地將最終的DOM操作與要素圖層分開 - 功能代碼現在通過聲明性地編寫VNodes來工作，使維護和添加新功能變得更加容易。

此外，VDOM的這種靈活性也可以通過讓用戶繞過模板並直接創作渲染功能而暴露給用戶。
VDOM差異不是免費的 - 事實上，如果您在大型組件樹的根目錄中使用setState()，它可能會非常昂貴。這就是爲什麼在React中，您需要使用PureComponent或者執行shouldComponentUpdate來繞過部分組件樹。通過dep跟蹤系統，我們可以自動更準確地檢測需要更新的組件，所以即使VDOM也可以從dep跟蹤系統中受益。
依賴項跟蹤也有其代價 - 對於每個綁定，它需要爲跟蹤的依賴項分配內存。超細粒度的綁定意味着應用中會有成千上萬的被動觀察者，導致額外的內存使用。跟蹤系統的細化程度取決於我們構建的應用程序類型。基於對典型應用程序結構的觀察，Vue 2通過跟蹤每個組件的依賴性，使用了一種「中等粒度」策略，從而使每個組件成爲反應式更新邊界。

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

來源

2017-05-29 10:03:12

太棒了！謝謝你回答。我已經在Nordic.js（https://www.youtube.com/watch?v=Ag-1wmHWwS4）上觀看了關於此主題的優秀演講，其中涵蓋了一些方面。 –

爲什麼Vue.js使用VDOM？

回答

相關問題