02.29 vue和react對比,各自優缺點在哪?

頑石mua


你好,我是「前端雨爸」,希望我的回答對你有所幫助。

首先

前端發展迅速,每天都讓我們反覆進入“學不動”的漩渦中。

但作為一個開發者,尤其是前端開發,我不希望各位把中心放在誰好誰壞上,更多的應該知道目前三大框架的不同,在項目實戰中有針對性的選擇。

同時,有精力還是都接觸下,畢竟都是最優秀的框架。

官方對比

Vue 官網給出了詳細的異同對比,相信這是最權威的比較(來自:尤大 作者的視角)

相同點:

  1. 使用了虛擬 DOM

  2. 提供響應式編程概念,組件化思想

  3. 漸進式編程,重點放在核心庫,其他交給社區或者第三方庫完成

不同之處:

1. diff 方式。

react 需要通過 PureComponent 或者實現 方法來優化組件渲染。

而 vue 不需要額外的設置,完全交給框架來完成。

2. JSX 和 Template

首先 Vue 也提供了渲染函數(render)。React 主推 JSX(就是那個讓大部分程序員,剛上手不習慣的渲染函數語法糖),會有種錯覺:HTML(React 元素) 和 Javascript 邏輯居然寫在了一起。

Vue 通過 vue-loader ,幫助我們把 template、script、css 分離開,或者最後組合在一起。完全可以像以前的 web 開發一樣,入門門檻降低。

3. 腳手架

React 提供了 create-react-app 工具,雖然是不錯的腳手架,但不涉及 webpack 等的配置的修改能力;

相反,Vue 依靠 vue.config.js 讓我們更定製化的修改腳手架配置。

4. 其他

React 學習成本更高,Vue 更符合我們的開發模式(習慣)

最後

意思就是自己使用下來,並結合 Vue 官網說明的總結。兩個框架都不錯,vue 更是借鑑了 angular 和 react 的產物。隨著版本的升級,他們三者越來越趨於同化,相信未來我們前端會走的越來越好。

歡迎關注「前端雨爸」,讓我們一同在前端路上成長進步。


前端雨爸


主要有以下三大區別

1.Vue 通過 getter/setter 以及一些函數的劫持,能精確知道數據變化,不需要特別的優化就能達到很好的性能。React 默認是通過比較引用的方式進行的,如果不優化,可能導致大量不必要的VDOM的重新渲染。

2.Vue 使用的是可變數據,而React更強調數據的不可變。

3.Vue更加簡單,而React構建大型應用的時候更加魯棒。



百暗MVP


各自優點

React

React速度很快:它並不直接對DOM進行操作,引入了一個叫做虛擬DOM的概念,安插在javascript邏輯和實際的DOM之間,性能好。最大限度減少DOM交互。

跨瀏覽器兼容:虛擬DOM幫助我們解決了跨瀏覽器問題,它為我們提供了標準化的API,甚至在IE8中都是沒問題的。

一切都是component:代碼更加模塊化,重用代碼更容易,可維護性高。這樣當某個或某些組件出現問題是,可以方便地進行隔離。每個組件都可以進行獨立的開發和測試,並且它們可以引入其它組件。這等同於提高了代碼的可維護性。

單向數據流:Flux是一個用於在JavaScript應用中創建單向數據層的架構,它隨著React視圖庫的開發而被Facebook概念化。減少了重複代碼,這也是它為什麼比傳統數據綁定更簡單。

同構、純粹的javascript:因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行,預渲染你的應用有助於搜索引擎優化。

兼容性好:比如使用RequireJS來加載和打包,而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。

vue

性能高效

雙向數據綁定

學習難度低,上手簡單。

React 的缺陷

React 只是一個視圖庫,而不是一個完整的框架。

對於 Web 開發初學者來說,有一個學習曲線。

將 React 集成到傳統的 MVC 框架中需要一些額外的配置。

代碼複雜性隨著內聯模板和 JSX 的增加而增加。

如果有太多的小組件可能增加項目的龐大和複雜。


zxl


Vuex 和 Redux 的區別

從表面上來說,store 注入和使用方式有一些區別。

在 Vuex 中,$store 被直接注入到了組件實例中,因此可以比較靈活的使用:

  • 使用 dispatch 和 commit 提交更新

  • 通過 mapState 或者直接通過 this.$store 來讀取數據

在 Redux 中,我們每一個組件都需要顯示的用 connect 把需要的 props 和 dispatch 連接起來。

另外 Vuex 更加靈活一些,組件中既可以 dispatch action 也可以 commit updates,而 Redux 中只能進行 dispatch,並不能直接調用 reducer 進行修改。

從實現原理上來說,最大的區別是兩點:

  • Redux 使用的是不可變數據,而Vuex的數據是可變的。Redux每次都是用新的state替換舊的state,而Vuex是直接修改

  • Redux 在檢測數據變化的時候,是通過 diff 的方式比較差異的,而Vuex其實和Vue的原理一樣,是通過 getter/setter來比較的(如果看Vuex源碼會知道,其實他內部直接創建一個Vue實例用來跟蹤數據變化)

而這兩點的區別,其實也是因為 React 和 Vue的設計理念上的區別。React更偏向於構建穩定大型的應用,非常的科班化。相比之下,Vue更偏向於簡單迅速的解決問題,更靈活,不那麼嚴格遵循條條框框。因此也會給人一種大型項目用React,小型項目用 Vue 的感覺。

各自優點

React

  1. React速度很快:它並不直接對DOM進行操作,引入了一個叫做虛擬DOM的概念,安插在javascript邏輯和實際的DOM之間,性能好。最大限度減少DOM交互。

  2. 跨瀏覽器兼容:虛擬DOM幫助我們解決了跨瀏覽器問題,它為我們提供了標準化的API,甚至在IE8中都是沒問題的。

  3. 一切都是component:代碼更加模塊化,重用代碼更容易,可維護性高。這樣當某個或某些組件出現問題是,可以方便地進行隔離。每個組件都可以進行獨立的開發和測試,並且它們可以引入其它組件。這等同於提高了代碼的可維護性。

  4. 單向數據流:Flux是一個用於在JavaScript應用中創建單向數據層的架構,它隨著React視圖庫的開發而被Facebook概念化。減少了重複代碼,這也是它為什麼比傳統數據綁定更簡單。

  5. 同構、純粹的javascript:因為搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行,預渲染你的應用有助於搜索引擎優化。

  6. 兼容性好:比如使用RequireJS來加載和打包,而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務不再讓人望而生畏。

vue

  1. 性能高效
  2. 雙向數據綁定
  3. 學習難度低,上手簡單。

React 的缺陷

  1. React 只是一個視圖庫,而不是一個完整的框架。
  2. 對於 Web 開發初學者來說,有一個學習曲線。
  3. 將 React 集成到傳統的 MVC 框架中需要一些額外的配置。
  4. 代碼複雜性隨著內聯模板和 JSX 的增加而增加。
  5. 如果有太多的小組件可能增加項目的龐大和複雜。

漫步茶卡鹽湖


從vue3開始就沒有什麼優點了


分享到:


相關文章: