Vue與React的區別和優勢對比
簡單介紹
React--Facebook建立的JavaScript UI框架。它支撐著包括Instagram在內的大多數Facebook網站。React與當時流行的jQuery,Backbone.js和Angular 1等框架不同,它的誕生改變了JavaScript的世界。其中最大的變化是React推廣了Virtual DOM(虛擬DOM)並創造了新的語法——JSX,JSX允許開發者在JavaScript中書寫HTML(譯者注:即HTML in JavaScript)。
Vue致力解決的問題與React一致,但卻提供了另外一套解決方案。Vue使用模板系統(弱化的jsx),使其對現有應用的升級更加容易。這是因為模板用的就是普通的HTML,通過Vue來整合現有的系統是比較容易的,不需要整體重構。同時Vue的學習曲線相對react來說更加容易。
相似之處
React與Vue有很多相似之處,如他們都是JavaScript的UI框架,專注於創造前端的富應用。不同於早期的JavaScript框架“功能齊全”,Reat與Vue只有框架的骨架,其他的功能如路由、狀態管理等是框架分離的元件。
- 兩者都是用於建立UI的JavaScript庫;
- 兩者都快速輕便;
- 都有基於元件的架構;
- 都是用虛擬DOM;
- 都可放入單個HTML檔案中,或者成為更復雜webpack設定中的模組;
- 都有獨立但常用的路由器和狀態管理庫;
它們之間的最大區別是Vue通常使用HTML模板檔案,而React則完全是JavaScript。Vue有雙向繫結語法糖。
不同點
1.監聽資料變化的實現原理不同
Vue通過 getter/setter以及一些函式的劫持,能精確知道資料變化。
React預設是通過比較引用的方式(diff)進行的,如果不優化可能導致大量不必要的VDOM的重新渲染。為什麼React不精確監聽資料變化呢?這是因為Vue和React設計理念上的區別,Vue使用的是可變資料,而React更強調資料的不可變,兩者沒有好壞之分,Vue更加簡單,而React構建大型應用的時候更加魯棒。
2.資料流的不同
Vue1.0中可以實現兩種雙向繫結:父子元件之間,props可以雙向繫結;元件與DOM之間可以通過v-model雙向繫結。Vue2.x中去掉了第一種,也就是父子元件之間不能雙向綁定了(但是提供了一個語法糖自動幫你通過事件的方式修改),並且Vue2.x已經不鼓勵元件對自己的 props進行任何修改了。
React一直不支援雙向繫結,提倡的是單向資料流,稱之為onChange/setState()模式。不過由於我們一般都會用Vuex以及Redux等單向資料流的狀態管理框架。
3.HoC和mixins
Vue組合不同功能的方式是通過mixin,Vue中元件是一個被包裝的函式,並不簡單的就是我們定義元件的時候傳入的物件或者函式。比如我們定義的模板怎麼被編譯的?比如宣告的props怎麼接收到的?這些都是vue建立元件例項的時候隱式乾的事。由於vue默默幫我們做了這麼多事,所以我們自己如果直接把元件的宣告包裝一下,返回一個HoC,那麼這個被包裝的元件就無法正常工作了。
React組合不同功能的方式是通過HoC(高階元件)。React最早也是使用mixins的,不過後來他們覺得這種方式對元件侵入太強會導致很多問題,就棄用了mixinx轉而使用HoC。高階元件本質就是高階函式,React的元件是一個純粹的函式,所以高階函式對React來說非常簡單。
4.元件通訊的區別
Vue中有三種方式可以實現元件通訊:父元件通過props向子元件傳遞資料或者回調,雖然可以傳遞迴調,但是我們一般只傳資料;子元件通過事件向父元件傳送訊息;通過V2.2.0中新增的provide/inject來實現父元件向子元件注入資料,可以跨越多個層級。
React中也有對應的三種方式:父元件通過props可以向子元件傳遞資料或者回調;可以通過 context 進行跨層級的通訊,這其實和 provide/inject 起到的作用差不多。React 本身並不支援自定義事件,而Vue中子元件向父元件傳遞訊息有兩種方式:事件和回撥函式,但Vue更傾向於使用事件。在React中我們都是使用回撥函式的,這可能是他們二者最大的區別。
5.模板渲染方式的不同
在表層上,模板的語法不同,React是通過JSX渲染模板。而Vue是通過一種拓展的HTML語法進行渲染,但其實這只是表面現象,畢竟React並不必須依賴JSX。
在深層上,模板的原理不同,這才是他們的本質區別:React是在元件JS程式碼中,通過原生JS實現模板中的常見語法,比如插值,條件,迴圈等,都是通過JS語法實現的,更加純粹更加原生。而Vue是在和元件JS程式碼分離的單獨的模板中,通過指令來實現的,比如條件語句就需要 v-if 來實現對這一點,這樣的做法顯得有些獨特,會把HTML弄得很亂。
6.渲染過程不同
Vue可以更快地計算出Virtual DOM的差異,這是由於它在渲染過程中,會跟蹤每一個元件的依賴關係,不需要重新渲染整個元件樹。
React在應用的狀態被改變時,全部子元件都會重新渲染。通過shouldComponentUpdate這個生命週期方法可以進行控制,但Vue將此視為預設的優化。
7.框架本質不同
Vue本質是MVVM框架,由MVC發展而來;
React是前端元件化框架,由後端元件化發展而來。
8.Vuex和Redux的區別
從表面上來說,store注入和使用方式有一些區別。在Vuex中,store被直接注入到了元件例項中,因此可以比較靈活的使用:使用dispatch、commit提交更新,通過mapState或者直接通過this.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來比較的,這兩點的區別,也是因為React和Vue的設計理念不同。React更偏向於構建穩定大型的應用,非常的科班化。相比之下,Vue更偏向於簡單迅速的解決問題,更靈活,不那麼嚴格遵循條條框框。因此也會給人一種大型專案用React,小型專案用Vue的感覺。
總結
Vue的優勢包括:
- 模板和渲染函式的彈性選擇
- 簡單的語法及專案建立
- 更快的渲染速度和更小的體積
React的優勢包括:
- 更適用於大型應用和更好的可測試性
- 同時適用於Web端和原生App
- 更大的生態圈帶來的更多支援和工具
而實際上,React和Vue都是非常優秀的框架,它們之間的相似之處多過不同之處,並且它們大部分最棒的功能是相通的:
- 利用虛擬DOM實現快速渲染
- 輕量級
- 響應式元件
- 伺服器端渲染
- 易於整合路由工具,打包工具以及狀態管理工具
- 優秀的支援和社群
以上就是Vue與React的區別和優勢對比的詳細內容,更多關於Vue與React的資料請關注我們其它相關文章!