react與vue的虛擬dom有什麼差別

react與vue的虛擬dom沒有差別；react和vue的虛擬dom都是用js物件來模擬真實DOM，用虛擬DOM的diff來最小化更新真實DOM，可以減少不必要的效能損耗，依顆粒度分為不同的類型比較同層級dom節點，進行增、刪、移的操作。

本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react與vue的虛擬dom有什麼區別

沒有區別。

react和vue的虛擬dom都是一樣的， 都是用JS物件來模擬真實DOM，然後用虛擬DOM的diff來最小化更新真實DOM。

除了極個別實作外，兩者前半部（用JS物件來模擬真實DOM）幾乎是一樣的。

而對於後半部（用虛擬DOM的diff來最小化更新真實DOM）兩者演算法也是類似的，包括replace delete insert等

vue和react都採用了虛擬dom演算法，以最小化更新真實DOM，從而減少不必要的效能損耗。

依顆粒度分為tree diff, component diff, element diff. tree diff 比較同層級dom節點，進行增、刪、移操作。如果遇到component， 就會重新tree diff流程。

雖然兩者對於dom的更新策略不太一樣， react採用自頂向下的全量diff，vue是局部訂閱的模式。但這其實和虛擬dom並無關係

dom的更新策略不同

#react 會自頂向下全diff.

vue會跟踪每一個元件的依賴關係,不需要重新渲染整個元件樹。

1、在react中，當狀態改變時，元件樹就會自頂向下的全diff, 重新render頁面， 重新產生新的虛擬dom tree, 新舊dom tree進行比較， 進行 patch打補丁方式，局部跟新dom. 所以react為了避免父組件跟新而引起不必要的子組件更新， 可以在shouldComponentUpdate做邏輯判斷，減少沒必要的render， 以及重新生成虛擬dom，做差量對比過程.

2、在vue中， 透過Object.defineProperty 把這些data 屬性全部轉為getter/setter。同時watcher實例物件會在元件渲染時，將屬性記錄為dep, 當dep 項中的 setter被呼叫時，通知watch重新計算，使得關聯元件更新。

Diff 演算法借助元素的 Key 判斷元素是新增、刪除、修改，從而減少不必要的元素重渲染。

推薦學習：《react影片教學》

以上是react與vue的虛擬dom有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！