快捷導(dǎo)航

Vue與React的區(qū)別和優(yōu)勢(shì)對(duì)比

更新時(shí)間：2020年12月18日 09:43:12 作者：lucky_qi

這篇文章主要介紹了Vue與React的區(qū)別和優(yōu)勢(shì)對(duì)比，幫助大家更好的選擇適合自己的前端框架，迷茫的同學(xué)可以進(jìn)來(lái)參考下

簡(jiǎn)單介紹

React--Facebook創(chuàng)建的JavaScript UI框架。它支撐著包括Instagram在內(nèi)的大多數(shù)Facebook網(wǎng)站。React與當(dāng)時(shí)流行的jQuery,Backbone.js和Angular 1等框架不同，它的誕生改變了JavaScript的世界。其中最大的變化是React推廣了Virtual DOM（虛擬DOM）并創(chuàng)造了新的語(yǔ)法——JSX，JSX允許開(kāi)發(fā)者在JavaScript中書(shū)寫(xiě)HTML（譯者注：即HTML in JavaScript）。

Vue致力解決的問(wèn)題與React一致，但卻提供了另外一套解決方案。Vue使用模板系統(tǒng)（弱化的jsx），使其對(duì)現(xiàn)有應(yīng)用的升級(jí)更加容易。這是因?yàn)槟０逵玫木褪瞧胀ǖ腍TML，通過(guò)Vue來(lái)整合現(xiàn)有的系統(tǒng)是比較容易的，不需要整體重構(gòu)。同時(shí)Vue的學(xué)習(xí)曲線相對(duì)react來(lái)說(shuō)更加容易。

相似之處

React與Vue有很多相似之處，如他們都是JavaScript的UI框架，專(zhuān)注于創(chuàng)造前端的富應(yīng)用。不同于早期的JavaScript框架“功能齊全”，Reat與Vue只有框架的骨架，其他的功能如路由、狀態(tài)管理等是框架分離的組件。

兩者都是用于創(chuàng)建UI的JavaScript庫(kù)；
兩者都快速輕便；
都有基于組件的架構(gòu)；
都是用虛擬DOM；
都可放入單個(gè)HTML文件中，或者成為更復(fù)雜webpack設(shè)置中的模塊；
都有獨(dú)立但常用的路由器和狀態(tài)管理庫(kù)；

它們之間的最大區(qū)別是Vue通常使用HTML模板文件，而React則完全是JavaScript。Vue有雙向綁定語(yǔ)法糖。

不同點(diǎn)

1.監(jiān)聽(tīng)數(shù)據(jù)變化的實(shí)現(xiàn)原理不同

Vue通過(guò) getter/setter以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)變化。

React默認(rèn)是通過(guò)比較引用的方式（diff）進(jìn)行的，如果不優(yōu)化可能導(dǎo)致大量不必要的VDOM的重新渲染。為什么React不精確監(jiān)聽(tīng)數(shù)據(jù)變化呢？這是因?yàn)閂ue和React設(shè)計(jì)理念上的區(qū)別，Vue使用的是可變數(shù)據(jù)，而React更強(qiáng)調(diào)數(shù)據(jù)的不可變，兩者沒(méi)有好壞之分，Vue更加簡(jiǎn)單，而React構(gòu)建大型應(yīng)用的時(shí)候更加魯棒。

2.數(shù)據(jù)流的不同

Vue1.0中可以實(shí)現(xiàn)兩種雙向綁定：父子組件之間，props可以雙向綁定；組件與DOM之間可以通過(guò)v-model雙向綁定。Vue2.x中去掉了第一種，也就是父子組件之間不能雙向綁定了（但是提供了一個(gè)語(yǔ)法糖自動(dòng)幫你通過(guò)事件的方式修改），并且Vue2.x已經(jīng)不鼓勵(lì)組件對(duì)自己的 props進(jìn)行任何修改了。

React一直不支持雙向綁定，提倡的是單向數(shù)據(jù)流，稱(chēng)之為onChange/setState()模式。不過(guò)由于我們一般都會(huì)用Vuex以及Redux等單向數(shù)據(jù)流的狀態(tài)管理框架。

3.HoC和mixins

Vue組合不同功能的方式是通過(guò)mixin，Vue中組件是一個(gè)被包裝的函數(shù)，并不簡(jiǎn)單的就是我們定義組件的時(shí)候傳入的對(duì)象或者函數(shù)。比如我們定義的模板怎么被編譯的？比如聲明的props怎么接收到的？這些都是vue創(chuàng)建組件實(shí)例的時(shí)候隱式干的事。由于vue默默幫我們做了這么多事，所以我們自己如果直接把組件的聲明包裝一下，返回一個(gè)HoC，那么這個(gè)被包裝的組件就無(wú)法正常工作了。

React組合不同功能的方式是通過(guò)HoC(高階組件）。React最早也是使用mixins的，不過(guò)后來(lái)他們覺(jué)得這種方式對(duì)組件侵入太強(qiáng)會(huì)導(dǎo)致很多問(wèn)題，就棄用了mixinx轉(zhuǎn)而使用HoC。高階組件本質(zhì)就是高階函數(shù)，React的組件是一個(gè)純粹的函數(shù)，所以高階函數(shù)對(duì)React來(lái)說(shuō)非常簡(jiǎn)單。

4.組件通信的區(qū)別

Vue中有三種方式可以實(shí)現(xiàn)組件通信：父組件通過(guò)props向子組件傳遞數(shù)據(jù)或者回調(diào)，雖然可以傳遞回調(diào)，但是我們一般只傳數(shù)據(jù)；子組件通過(guò)事件向父組件發(fā)送消息；通過(guò)V2.2.0中新增的provide/inject來(lái)實(shí)現(xiàn)父組件向子組件注入數(shù)據(jù)，可以跨越多個(gè)層級(jí)。

React中也有對(duì)應(yīng)的三種方式：父組件通過(guò)props可以向子組件傳遞數(shù)據(jù)或者回調(diào)；可以通過(guò) context 進(jìn)行跨層級(jí)的通信，這其實(shí)和 provide/inject 起到的作用差不多。React 本身并不支持自定義事件，而Vue中子組件向父組件傳遞消息有兩種方式：事件和回調(diào)函數(shù)，但Vue更傾向于使用事件。在React中我們都是使用回調(diào)函數(shù)的，這可能是他們二者最大的區(qū)別。

5.模板渲染方式的不同

在表層上，模板的語(yǔ)法不同，React是通過(guò)JSX渲染模板。而Vue是通過(guò)一種拓展的HTML語(yǔ)法進(jìn)行渲染，但其實(shí)這只是表面現(xiàn)象，畢竟React并不必須依賴JSX。

在深層上，模板的原理不同，這才是他們的本質(zhì)區(qū)別：React是在組件JS代碼中，通過(guò)原生JS實(shí)現(xiàn)模板中的常見(jiàn)語(yǔ)法，比如插值，條件，循環(huán)等，都是通過(guò)JS語(yǔ)法實(shí)現(xiàn)的，更加純粹更加原生。而Vue是在和組件JS代碼分離的單獨(dú)的模板中，通過(guò)指令來(lái)實(shí)現(xiàn)的，比如條件語(yǔ)句就需要 v-if 來(lái)實(shí)現(xiàn)對(duì)這一點(diǎn)，這樣的做法顯得有些獨(dú)特，會(huì)把HTML弄得很亂。

6.渲染過(guò)程不同

Vue可以更快地計(jì)算出Virtual DOM的差異，這是由于它在渲染過(guò)程中，會(huì)跟蹤每一個(gè)組件的依賴關(guān)系，不需要重新渲染整個(gè)組件樹(shù)。

React在應(yīng)用的狀態(tài)被改變時(shí)，全部子組件都會(huì)重新渲染。通過(guò)shouldComponentUpdate這個(gè)生命周期方法可以進(jìn)行控制，但Vue將此視為默認(rèn)的優(yōu)化。

7.框架本質(zhì)不同

Vue本質(zhì)是MVVM框架，由MVC發(fā)展而來(lái)；

React是前端組件化框架，由后端組件化發(fā)展而來(lái)。

8.Vuex和Redux的區(qū)別

從表面上來(lái)說(shuō)，store注入和使用方式有一些區(qū)別。在Vuex中，store被直接注入到了組件實(shí)例中，因此可以比較靈活的使用：使用dispatch、commit提交更新，通過(guò)mapState或者直接通過(guò)this.store被直接注入到了組件實(shí)例中，因此可以比較靈活的使用：使用dispatch、commit提交更新，通過(guò)mapState或者直接通過(guò)this.store來(lái)讀取數(shù)據(jù)。在Redux中，我們每一個(gè)組件都需要顯示的用connect把需要的props和dispatch連接起來(lái)。另外，Vuex更加靈活一些，組件中既可以dispatch action，也可以commit updates，而Redux中只能進(jìn)行dispatch，不能直接調(diào)用reducer進(jìn)行修改。

從實(shí)現(xiàn)原理上來(lái)說(shuō)，最大的區(qū)別是兩點(diǎn)：Redux使用的是不可變數(shù)據(jù)，而Vuex的數(shù)據(jù)是可變的，因此，Redux每次都是用新state替換舊state，而Vuex是直接修改。Redux在檢測(cè)數(shù)據(jù)變化的時(shí)候，是通過(guò)diff的方式比較差異的，而Vuex其實(shí)和Vue的原理一樣，是通過(guò)getter/setter來(lái)比較的，這兩點(diǎn)的區(qū)別，也是因?yàn)镽eact和Vue的設(shè)計(jì)理念不同。React更偏向于構(gòu)建穩(wěn)定大型的應(yīng)用，非常的科班化。相比之下，Vue更偏向于簡(jiǎn)單迅速的解決問(wèn)題，更靈活，不那么嚴(yán)格遵循條條框框。因此也會(huì)給人一種大型項(xiàng)目用React，小型項(xiàng)目用Vue的感覺(jué)。