為什么我立刻放棄了 React 而使用 Vue ？
點(diǎn)擊“開(kāi)發(fā)者技術(shù)前線”，選擇“星標(biāo)?”
在看|星標(biāo)|留言,? 真愛(ài)
作者：Gwenael P，前端工程師，Vue.js的狂熱者
譯者：彎月
現(xiàn)在，Vue.js 在 Github 上得到的星星數(shù)已經(jīng)超過(guò)了 React。這個(gè)框架的流行度在不斷增長(zhǎng)，由于它并沒(méi)有像 Facebok（React）或 Google（Angular）那樣的大公司支持，這種增長(zhǎng)讓人非常驚訝。
我會(huì)在這篇文章里說(shuō)明我對(duì) Vue 流行的一些看法，以及為什么它能超過(guò)競(jìng)爭(zhēng)者。由于 Vue 的設(shè)計(jì)哲學(xué)和特性與 React 十分相似，我會(huì)比較這兩者，并說(shuō)明為什么 React（即使它是個(gè)好框架）經(jīng)常很有欺騙性。
1. Web 開(kāi)發(fā)的發(fā)展
在上個(gè)世紀(jì)九十年代，寫(xiě)網(wǎng)站還只是純粹的 HTML，加上一些簡(jiǎn)單的 CSS 樣式而已。好處就是非常簡(jiǎn)單。壞處就是缺少很多功能。
之后就出現(xiàn)了 PHP，于是我們很高興地把代碼寫(xiě)成了這個(gè)樣子：
雖然今天看來(lái)這段代碼十分糟糕，但在當(dāng)時(shí)是很大的進(jìn)步。這種進(jìn)步到現(xiàn)在依然沒(méi)變：選擇我們喜歡的新語(yǔ)言、新框架，直到某一天出現(xiàn)更好的競(jìng)爭(zhēng)對(duì)手。
在 React 出現(xiàn)之前我用過(guò) Ember。之后我切換到 React，它把所有東西都看作 Web 組件的方式，它的虛擬 DOM，和高效的渲染都讓我耳目一新。雖然并不是一切完美，但從編寫(xiě)代碼的方式來(lái)看，它是個(gè)巨大的進(jìn)步。
后來(lái)我決定切換到 Vue.js，不再使用 React。
React 并非很差，但我發(fā)現(xiàn)它太笨拙，難以掌握，而且有些地方的代碼看起來(lái)完全沒(méi)有邏輯性。而 Vue 解決這些問(wèn)題的方法讓我感到很輕松。
我來(lái)說(shuō)說(shuō)原因。
2. 性能
首先來(lái)談一談性能。
每個(gè) Web 開(kāi)發(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í)際的性能如下圖所示：
可見(jiàn)，這些性能測(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)定，但我一直沒(méi)弄明白它的高級(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)綁定：。
有時(shí)候React會(huì)變得完全不合邏輯……
考慮到應(yīng)用中很大可能會(huì)用到許多條件判斷，JSX的方法就非常糟糕了。寫(xiě)循環(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 寫(xiě)出的代碼要比其他框架寫(xiě)出的代碼要小很多。這是 Vue 框架最好的一點(diǎn)。一切都很簡(jiǎn)單，只需幾行簡(jiǎn)明易懂的代碼就可以編寫(xiě)出復(fù)雜的功能。而使用其他框架，你需要多寫(xiě) 10%、20% 甚至 50% 的代碼。
使用 Vue 也不需要學(xué)太多東西。一切都很直觀。書(shū)寫(xiě) Vue.js 代碼能夠以最接近的方式表達(dá)思想。
Vue 的這種易用性是個(gè)非常好的工具，使得接受 Vue 變得容易，也利于團(tuán)隊(duì)溝通。不論是你要改變技術(shù)棧的其他部分，還是需要在緊急狀況下向團(tuán)隊(duì)里增加更多人，或者解釋你的產(chǎn)品，Vue 都能節(jié)約你的時(shí)間，從而節(jié)約金錢(qián)。
時(shí)間估算也很容易，因?yàn)閷?shí)現(xiàn)功能所需的時(shí)間不會(huì)超過(guò)開(kāi)發(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í)間和金錢(qián)問(wèn)題。
它的輕量化和性能使得你可以同時(shí)在項(xiàng)目中使用兩個(gè)框架（如Angular和Vue），因此更容易移植到 Vue。
至于社區(qū)和流行度，即使 Vue 現(xiàn)在獲得了很多關(guān)注，但還很難說(shuō)它達(dá)到了 React 的流行程度。但一個(gè)沒(méi)有大型 IT 公司支持的框架能如此流行，這個(gè)事實(shí)本身就值得關(guān)注。它的市場(chǎng)占有率已經(jīng)迅速?gòu)囊粋€(gè)不為人知的項(xiàng)目成長(zhǎng)為一個(gè)前端開(kāi)發(fā)中的最大的競(jìng)爭(zhēng)者。
Vue 上的模塊數(shù)量也在飛速增長(zhǎng)，而且就算你找不到你需要的模塊，自己寫(xiě)一個(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í)候。還需要花很大精力去編寫(xiě)模板，編寫(xiě)模板的方式也會(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ì)使用。
作為開(kāi)發(fā)者，我感到高興、自信和自由。作為項(xiàng)目經(jīng)理，我可以更容易地與團(tuán)隊(duì)進(jìn)行計(jì)劃和溝通。作為自由職業(yè)者，我省下了時(shí)間和金錢(qián)。
當(dāng)然還有許多 Vue 沒(méi)有覆蓋到的需求（特別是如果你要構(gòu)建原生應(yīng)用的時(shí)候）。在那些領(lǐng)域 React 做得很好，但 Evan You 和 Vue 團(tuán)隊(duì)已經(jīng)在著手解決這些問(wèn)題了。
React 由于它很好的概念和這些概念的實(shí)現(xiàn)而流行。但現(xiàn)在看來(lái)，它的概念混亂得一團(tuán)糟。
寫(xiě) React 代碼的時(shí)候整天都要應(yīng)付各種臨時(shí)對(duì)策（參考“代碼清晰度”一節(jié)），努力寫(xiě)出有意義的代碼，最后得到的只能是一團(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)與我想像中的開(kāi)發(fā)很相近，而且在開(kāi)發(fā)過(guò)程中，除了需要實(shí)現(xiàn)的東西之外，基本上不需要考慮任何其他東西。它看上去很像原生的 JavaScript 邏輯（沒(méi)有setState，也沒(méi)有用來(lái)實(shí)現(xiàn)條件結(jié)構(gòu)的特殊用法，也沒(méi)有各種算法那）。只需要按你想像的方式寫(xiě)代碼就行。它速度很快，很安全，而且能讓你高興。我很高興看到 Vue 越來(lái)越多被前端開(kāi)發(fā)者和公司接受，我希望它能結(jié)束 React 的統(tǒng)治地位。
免責(zé)聲明：這篇文章是我的個(gè)人觀點(diǎn)，僅表達(dá)我現(xiàn)在的觀點(diǎn)。隨著技術(shù)的進(jìn)步，這些觀點(diǎn)會(huì)發(fā)生變化（可能會(huì)變好或變壞）。
https://blog.sourcerer.io/why-you-should-leave-react-for-vue-and-never-use-it-again-5e274bef27c2
掃碼加助手微信進(jìn)群，內(nèi)推和技術(shù)交流，大佬們零距離
END 后臺(tái)回復(fù)“面試”?“資料”?領(lǐng)取一份干貨，數(shù)百技術(shù)面試手冊(cè)等你 開(kāi)發(fā)者技術(shù)前線 ，匯集技術(shù)前線快訊和關(guān)注行業(yè)趨勢(shì)，大廠干貨，是開(kāi)發(fā)者經(jīng)歷和成長(zhǎng)的優(yōu)秀指南。 歷史推薦 騰訊視頻 Python 爬蟲(chóng)項(xiàng)目實(shí)戰(zhàn) 昨晚家里停網(wǎng)后，我動(dòng)了邪念用Python破解了隔壁小姐姐的wifi密碼 VS Code 成主宰、Vue備受熱捧！2020 前端開(kāi)發(fā)趨勢(shì)指南 充氣娃娃什么感覺(jué)？Python 告訴你！ VSCode 現(xiàn)內(nèi)存泄漏 BUG，官方處理方式引社區(qū)不滿 好文點(diǎn)個(gè)在看吧！
