vue和react的區別之我見

2021-09-11 12:58:40 字數 1811 閱讀 2858

react和vue都是做元件化的,整體的功能都類似,但是他們的設計思路是有很多不同的。使用react和vue,主要是理解他們的設計思路的不同。

react整體是函式式的思想,把元件設計成純元件,狀態和邏輯通過引數傳入,所以在react中,是單向資料流,推崇結合immutable來實現資料不可變。react在setstate之後會重新走渲染的流程,如果shouldcomponentupdate返回的是true,就繼續渲染,如果返回了false,就不會重新渲染,purecomponent就是重寫了shouldcomponentupdate,然後在裡面作了props和state的淺層對比。

而vue的思想是響應式的,也就是基於是資料可變的,通過對每乙個屬性建立watcher來監聽,當屬性變化的時候,響應式的更新對應的虛擬dom。

總之,react的效能優化需要手動去做,而vue的效能優化是自動的,但是vue的響應式機制也有問題,就是當state特別多的時候,watcher也會很多,會導致卡頓,所以大型應用(狀態特別多的)一般用react,更加可控。

react的思路是all in js,通過js來生成html,所以設計了jsx,還有通過js來操作css,社群的styled-component、jss等,

vue是把html,css,js組合到一起,用各自的處理方式,vue有單檔案元件,可以把html、css、js寫到乙個檔案中,html提供了模板引擎來處理。

react是類式的寫法,api很少,

而vue是宣告式的寫法,通過傳入各種options,api和引數都很多。所以react結合typescript更容易一起寫,vue稍微複雜。

vue結合vue-class-component也可以實現類式的寫法,但是還是需要通過decorator來新增宣告,並不純粹。

react可以通過高階元件(higher order components--hoc)來擴充套件,而vue需要通過mixins來擴充套件 乙個react高階元件的例子:

vue的mixin的例子:

react剛開始也有mixin的寫法,通過react.createclass的api,不過現在很少用了。 vue也不是不能實現高階元件,只是特別麻煩,因為vue對與元件的option做了各種處理,想實現高階元件就要知道每乙個option是怎麼處理的,然後正確的設定。具體有多複雜,可以參考下面的文章。

hcysun.me/2018/01/05/…

react做的事情很少,很多都交給社群去做,vue很多東西都是內建的,寫起來確實方便一些, 比如 redux的combinereducer就對應vuex的modules, 比如reselect就對應vuex的getter和vue元件的computed, vuex的mutation是直接改變的原始資料,而redux的reducer是返回乙個全新的state,所以redux結合immutable來優化效能,vue不需要。

上面主要梳理了react和vue的4點不同:

資料是不是可變的

通過js操作一切還是各自的處理方式

類式的元件寫法還是宣告式的寫法

什麼功能內建,什麼交給社群去做

(其中第3點在vue3.0支援類式寫法之後就可以去掉了)

react整體的思路就是函式式,所以推崇純元件,資料不可變,單向資料流,當然需要雙向的地方也可以做到,比如結合redux-form,而vue是基於可變資料的,支援雙向繫結。react元件的擴充套件一般是通過高階元件,而vue元件會使用mixin。vue內建了很多功能,而react做的很少,很多都是由社群來完成的,vue追求的是開發的簡單,而react更在乎方式是否正確。

元件、資料驅動、渲染、狀態管理的功能兩者都差不多,區別更多的是設計思想上的區別,理清兩者的使用方式和優缺點,綜合喜好和自己專案、團隊的情況以作出選擇。

vue和react的區別之我見

react和vue都是做元件化的,整體的功能都類似,但是他們的設計思路是有很多不同的。使用react和vue,主要是理解他們的設計思路的不同。react整體是函式式的思想,把元件設計成純元件,狀態和邏輯通過引數傳入,所以在react中,是單向資料流,推崇結合immutable來實現資料不可變。rea...

react和vue的區別

資料是否可變 react整體是函式式的思想,把元件設計成純元件,狀態和邏輯通過引數傳入,所以在react中,是單向資料流,推崇結合immutable來實現資料不可變 vue的思想是響應式的,也就是基於是資料可變的,通過對每乙個屬性建立watcher來監聽,當屬性變化的時候,響應式的更新對應的虛擬do...

React和Vue的區別?(39)

元件化方面 1.什麼是模組化 是從 的角度來進行分析的 把一些可復用的 抽離為單個的模組 便於專案的維護和開發 2.什麼是元件化 是從ui介面的角度 來進行分析的 把一些可復用的ui元素,抽離為單獨的元件 便於專案的維護和開發 3.元件化的好處 隨著專案規模的增大,手裡的元件越來越多 很方便就能把現...