react與vue的虛擬dom有哪些區(qū)別

本篇內容主要講解“react與vue的虛擬dom有哪些區(qū)別”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“react與vue的虛擬dom有哪些區(qū)別”吧!

react與vue的虛擬dom沒有區(qū)別；react和vue的虛擬dom都是用js對象來模擬真實DOM，用虛擬DOM的diff來最小化更新真實DOM，可以減小不必要的性能損耗，按顆粒度分為不同的類型比較同層級dom節(jié)點，進行增、刪、移的操作。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react與vue的虛擬dom有什么區(qū)別

沒有區(qū)別。

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

除了極個別實現(xiàn)外，兩者前半部分（用JS對象來模擬真實DOM）幾乎是一樣的。

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

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

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

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

dom的更新策略不同

react 會自頂向下全diff.

vue會跟蹤每一個組件的依賴關系,不需要重新渲染整個組件樹。

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

2、在 vue中， 通過Object.defineProperty 把這些 data 屬性 全部轉為 getter/setter。同時watcher實例對象會在組件渲染時，將屬性記錄為dep, 當dep 項中的 setter被調用時，通知watch重新計算，使得關聯(lián)組件更新。

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

到此，相信大家對“react與vue的虛擬dom有哪些區(qū)別”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！