react和vuejs相比哪個(gè)更好一點(diǎn)

這篇文章將為大家詳細(xì)講解有關(guān)react和vuejs相比哪個(gè)更好一點(diǎn)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

不論是從大小、性能、簡(jiǎn)單性還是學(xué)習(xí)曲線上來(lái)看， Vuejs是現(xiàn)在最好的選擇，它的輕量化和性能可以同時(shí)在項(xiàng)目中使用兩個(gè)框架（如Angular和Vue）而 React代碼難以維護(hù)和去修改它

現(xiàn)如今，Vue.js 在 Github 上的流行指數(shù)已經(jīng)超過(guò)了 React而且還在不斷的增長(zhǎng)，由于它并沒有像 Facebok或Google那樣的大公司支持，但這種增長(zhǎng)讓人非常驚訝。

接下來(lái)在文章中將會(huì)分享一些對(duì) Vue 流行的看法，以及為什么它能超過(guò)競(jìng)爭(zhēng)者。以及它倆之間的區(qū)別，并說(shuō)明為什么 React（即使它是個(gè)好框架）經(jīng)常很有欺騙性

1. Web 開發(fā)的發(fā)展

在上個(gè)世紀(jì)九十年代，寫網(wǎng)站還只是純粹的 HTML，加上一些簡(jiǎn)單的 CSS 樣式而已。好處就是非常簡(jiǎn)單。壞處就是缺少很多功能。之后就出現(xiàn)了 PHP，于是我們很高興地把代碼寫成了這個(gè)樣子

雖然今天看來(lái)這段代碼十分糟糕，但在當(dāng)時(shí)是很大的進(jìn)步。這種進(jìn)步到現(xiàn)在依然沒變：選擇我們喜歡的新語(yǔ)言、新框架，直到某一天出現(xiàn)更好的競(jìng)爭(zhēng)對(duì)手。

在 React 出現(xiàn)之前我用過(guò) Ember。之后我切換到 React，它把所有東西都看作 Web 組件的方式，它的虛擬 DOM，和高效的渲染都讓我耳目一新。雖然并不是一切完美，但從編寫代碼的方式來(lái)看，它是個(gè)巨大的進(jìn)步。

后來(lái)我決定切換到 Vue.js，不再使用 React。

React 并非很差，但我發(fā)現(xiàn)它太笨拙，難以掌握，而且有些地方的代碼看起來(lái)完全沒有邏輯性。而 Vue 解決這些問(wèn)題的方法讓我感到很輕松。

原因如下：

2. 性能

首先來(lái)談一談性能。

每個(gè) Web 開發(fā)者都會(huì)面臨著帶寬的限制，因此網(wǎng)頁(yè)的大小十分重要。網(wǎng)頁(yè)越小越好。而現(xiàn)在由于移動(dòng)瀏覽器的流行，這個(gè)問(wèn)題比幾年前更重要。

我們來(lái)看一組數(shù)字：

Vue 庫(kù)的大小為 25.6KB。而要讓 React 的架構(gòu)達(dá)到相似的功能，需要 React DOM + React Router + React 和其他插件，總共是 48.8KB。

Vue 得一分。

實(shí)際的性能如下圖所示：

可見，這些性能測(cè)試顯示，Vue 比 React 占用的內(nèi)存更少，運(yùn)行速度更快。

Vue 的渲染流水線更快，這在構(gòu)建復(fù)雜應(yīng)用時(shí)非常有用。項(xiàng)目渲染更高效，因此不需要在優(yōu)化代碼上考慮太多，從而把更多精力花在對(duì)項(xiàng)目真正有用的功能上。它在移動(dòng)設(shè)備上的性能也很不錯(cuò)，因此不需要采用某種算法使之在手機(jī)上能更流暢地渲染。

從 React 換成 Vue.js 時(shí)，你不需要在大小和性能方面做出妥協(xié)。你能同時(shí)擁有兩者。

3. 學(xué)習(xí)曲線

學(xué)習(xí) React 還算不錯(cuò)。整個(gè)庫(kù)都圍繞 Web 組件構(gòu)建，這一點(diǎn)很好。React 的核心很好、很穩(wěn)定，但我一直沒弄明白它的高級(jí)路由配置。這么多路由庫(kù)的版本是做什么的？現(xiàn)在的版本是4（+ React-router-dom），但我最終用的還是 v3。一旦你選擇了版本，它還是很好用的，但學(xué)習(xí)的過(guò)程卻非常痛苦。

第三方庫(kù)

大多數(shù)現(xiàn)代框架都有同樣的設(shè)計(jì)哲學(xué)：簡(jiǎn)單的、功能不太多的核心，然后加上其他的庫(kù)來(lái)增強(qiáng)其功能。如果其他的庫(kù)都能很容易地、用同一種方式集成，那么構(gòu)建一個(gè)技術(shù)棧會(huì)非常簡(jiǎn)單。在我看來(lái)，這一步驟的簡(jiǎn)單、直接是非常重要的。

React和Vue都有一套工具幫你啟動(dòng)項(xiàng)目，并配置好各種工具。在React生態(tài)環(huán)境中，各種庫(kù)可能很難精通，因?yàn)榻?jīng)常會(huì)有幾個(gè)庫(kù)試圖解決同一個(gè)問(wèn)題。

在這個(gè)問(wèn)題上，React和Vue做得都不錯(cuò)。

代碼清晰度

在我看來(lái) React 的代碼清晰度很差。JSX 允許在代碼中嵌入 HTML 代碼，是代碼清晰度方面的災(zāi)難。

你還會(huì)遇到其他的問(wèn)題。從組件模板中調(diào)用方法經(jīng)常會(huì)造成無(wú)法訪問(wèn)this，結(jié)果不得不手動(dòng)綁定：

<div onClick={this.someFunction.bind(this, listItem)} />

有時(shí)候React會(huì)變得完全不合邏輯……

考慮到應(yīng)用中很大可能會(huì)用到許多條件判斷，JSX的方法就非常糟糕了。寫循環(huán)的方式更像個(gè)笑話。當(dāng)然你可以換個(gè)模板系統(tǒng)，從React棧中去掉JSX，也可以在Vue中使用JSX，但那并不是在學(xué)習(xí)框架時(shí)首先學(xué)習(xí)的方法，因此這里不做討論。

另一點(diǎn)是，Vue并不要求你必須使用setState或任何類似的方法。當(dāng)然你還是要在data方法中定義所有的state屬性，但如果你忘了定義，那么控制臺(tái)中就會(huì)顯示提示。剩下的會(huì)自動(dòng)內(nèi)部處理，只需要在組件中修改值即可，跟使用普通的 Javascript 對(duì)象一樣。

使用 React 會(huì)遇到很多錯(cuò)誤。就算實(shí)際的原理很簡(jiǎn)單，這些錯(cuò)誤也會(huì)減慢學(xué)習(xí)的進(jìn)度。

至于簡(jiǎn)潔性，用 Vue 寫出的代碼要比其他框架寫出的代碼要小很多。這是 Vue 框架最好的一點(diǎn)。一切都很簡(jiǎn)單，只需幾行簡(jiǎn)明易懂的代碼就可以編寫出復(fù)雜的功能。而使用其他框架，你需要多寫 10%、20% 甚至 50% 的代碼。

使用 Vue 也不需要學(xué)太多東西。一切都很直觀。書寫 Vue.js 代碼能夠以最接近的方式表達(dá)思想。

Vue 的這種易用性是個(gè)非常好的工具，使得接受 Vue 變得容易，也利于團(tuán)隊(duì)溝通。不論是你要改變技術(shù)棧的其他部分，還是需要在緊急狀況下向團(tuán)隊(duì)里增加更多人，或者解釋你的產(chǎn)品，Vue 都能節(jié)約你的時(shí)間，從而節(jié)約金錢。

時(shí)間估算也很容易，因?yàn)閷?shí)現(xiàn)功能所需的時(shí)間不會(huì)超過(guò)開發(fā)者估算的時(shí)間，從而導(dǎo)致更少的誤解、錯(cuò)誤或樂(lè)觀估計(jì)。Vue 需要理解的概念更少，使得與項(xiàng)目經(jīng)理之間的溝通更容易。

4. 結(jié)論

不論是從大小、性能、簡(jiǎn)單性還是學(xué)習(xí)曲線上來(lái)看，擁抱 Vue.js 絕對(duì)是現(xiàn)在最好的選擇，能同時(shí)解決時(shí)間和金錢問(wèn)題。它的輕量化和性

能使得你可以同時(shí)在項(xiàng)目中使用兩個(gè)框架（如Angular和Vue），因此更容易移植到 Vue。

至于社區(qū)和流行度，即使 Vue 現(xiàn)在獲得了很多關(guān)注，但還很難說(shuō)它達(dá)到了 React 的流行程度。但一個(gè)沒有大型 IT 公司支持的框架能如此

流行，這個(gè)事實(shí)本身就值得關(guān)注。它的市場(chǎng)占有率已經(jīng)迅速?gòu)囊粋€(gè)不為人知的項(xiàng)目成長(zhǎng)為一個(gè)前端開發(fā)中的最大的競(jìng)爭(zhēng)者。

Vue 上的模塊數(shù)量也在飛速增長(zhǎng)，而且就算你找不到你需要的模塊，自己寫一個(gè)也不會(huì)花太多時(shí)間。

這個(gè)框架使得理解、分享和編輯變得容易。不僅閱讀他人的代碼會(huì)變得很容易，修改他人的實(shí)現(xiàn)也不難。有了 Vue，我只用了幾個(gè)月的時(shí)

間，就可以自信地處理各個(gè)子項(xiàng)目，和外部人員對(duì)項(xiàng)目做出的改動(dòng)。它為我節(jié)省了時(shí)間，使我能專注于系統(tǒng)設(shè)計(jì)上。

React 從設(shè)計(jì)上要求使用 setState 等輔助函數(shù)，而編程時(shí)肯定會(huì)有忘記使用的時(shí)候。還需要花很大精力去編寫模板，編寫模板的方式也會(huì)讓項(xiàng)目變得難以理解和維護(hù)。

考慮到在大型項(xiàng)目中使用這些框架，使用 React 時(shí)你需要掌握其他庫(kù)，并教給你的團(tuán)隊(duì)怎樣使用。還要處理各種相關(guān)的問(wèn)題（甲不喜歡這個(gè)庫(kù)，乙不理解那個(gè)庫(kù)等）。Vue 棧更簡(jiǎn)單，更適合團(tuán)隊(duì)使用。

寫 React 代碼的時(shí)候整天都要應(yīng)付各種臨時(shí)對(duì)策，努力寫出有意義的代碼，最后得到的只能是一團(tuán)誰(shuí)也看不明白的解決方案。就連你自己，過(guò)幾個(gè)月之后這個(gè)解決方案也很難再讀懂。你為了發(fā)布項(xiàng)目而不得不做出辛苦的努力，而得到的只是一個(gè)難以維護(hù)、充滿錯(cuò)誤的東西，連修改它都要經(jīng)過(guò)一番培訓(xùn)才行。

這些負(fù)面因素是任何人都不希望在項(xiàng)目中看到的。為什么還要應(yīng)付這些麻煩呢？就為了社區(qū)和第三方庫(kù)？為了獲得一小部分好處，我們要承受太多痛苦，而就連這一小部分好處，也越來(lái)越變得不重要。

React 曾經(jīng)讓我的生活更容易，但在某些方面又讓實(shí)現(xiàn)變得更復(fù)雜。多年以后，Vue 終于讓我得到了解脫。它的實(shí)現(xiàn)與我想像中的開發(fā)很相近，而且在開發(fā)過(guò)程中，除了需要實(shí)現(xiàn)的東西之外，基本上不需要考慮任何其他東西。它看上去很像原生的 JavaScript 邏輯（沒有setState，也沒有用來(lái)實(shí)現(xiàn)條件結(jié)構(gòu)的特殊用法，也沒有各種算法那）。只需要按你想像的方式寫代碼就行。它速度很快，很安全，而且能讓你高興。我很高興看到 Vue 越來(lái)越多被前端開發(fā)者和公司接受，我希望它能結(jié)束 React 的統(tǒng)治地位。

關(guān)于react和vuejs相比哪個(gè)更好一點(diǎn)就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。