
如今,Vue.js 在 Github 上獲得的星星數已經超過了 React。這個框架的流行度在不斷增加,因爲它並無像 Facebok(React)或 Google(Angular)那樣的大公司支持,這種增加讓人很是驚訝。vue
我會在這篇文章裏說明我對 Vue 流行的一些見解,以及爲何它能超過競爭者。因爲 Vue 的設計哲學和特性與 React 十分類似,我會比較這二者,並說明爲何 React(即便它是個好框架)常常頗有欺騙性。react
Web 開發的發展算法
在上個世紀九十年代,寫網站還只是純粹的 HTML,加上一些簡單的 CSS 樣式而已。好處就是很是簡單。壞處就是缺乏不少功能。編程
以後就出現了 PHP,因而咱們很高興地把代碼寫成了這個樣子:瀏覽器

雖然今天看來這段代碼十分糟糕,但在當時是很大的進步。這種進步到如今依然沒變:選擇咱們喜歡的新語言、新框架,直到某一天出現更好的競爭對手。安全
在 React 出現以前我用過 Ember。以後我切換到 React,它把全部東西都看做 Web 組件的方式,它的虛擬 DOM,和高效的渲染都讓我耳目一新。雖然並非一切完美,但從編寫代碼的方式來看,它是個巨大的進步。前端工程師
後來我決定切換到 Vue.js,再也不使用 React。架構
React 並不是不好,但我發現它太笨拙,難以掌握,並且有些地方的代碼看起來徹底沒有邏輯性。而 Vue 解決這些問題的方法讓我感到很輕鬆。框架
我來講說緣由。
性能
首先來談一談性能。
每一個 Web 開發者都會面臨着帶寬的限制,所以網頁的大小十分重要。網頁越小越好。而如今因爲移動瀏覽器的流行,這個問題比幾年前更重要。
咱們來看一組數字:
Vue 庫的大小爲 25.6KB。而要讓 React 的架構達到類似的功能,須要 React DOM + React Router + React 和其餘插件,總共是 48.8KB。
Vue 得一分。
實際的性能以下圖所示:


可見,這些性能測試顯示,Vue 比 React 佔用的內存更少,運行速度更快。
Vue 的渲染流水線更快,這在構建複雜應用時很是有用。項目渲染更高效,所以不須要在優化代碼上考慮太多,從而把更多精力花在對項目真正有用的功能上。它在移動設備上的性能也很不錯,所以不須要採用某種算法使之在手機上能更流暢地渲染。
從 React 換成 Vue.js 時,你不須要在大小和性能方面作出妥協。你能同時擁有二者。
學習曲線
學習 React 還算不錯。整個庫都圍繞 Web 組件構建,這一點很好。React 的核心很好、很穩定,但我一直沒弄明白它的高級路由配置。這麼多路由庫的版本是作什麼的?如今的版本是4(+ React-router-dom),但我最終用的仍是 v3。一旦你選擇了版本,它仍是很好用的,但學習的過程卻很是痛苦。
第三方庫
大多數現代框架都有一樣的設計哲學:簡單的、功能不太多的核心,而後加上其餘的庫來加強其功能。若是其餘的庫都能很容易地、用同一種方式集成,那麼構建一個技術棧會很是簡單。在我看來,這一步驟的簡單、直接是很是重要的。
React和Vue都有一套工具幫你啓動項目,並配置好各類工具。在React生態環境中,各類庫可能很難精通,由於常常會有幾個庫試圖解決同一個問題。
在這個問題上,React和Vue作得都不錯。
代碼清晰度
在我看來 React 的代碼清晰度不好。JSX 容許在代碼中嵌入 HTML 代碼,是代碼清晰度方面的災難。
你還會遇到其餘的問題。從組件模板中調用方法常常會形成沒法訪問this,結果不得不手動綁定:<div onClick={this.someFunction.bind(this, listItem)} />。

有時候React會變得徹底不合邏輯……
考慮到應用中很大可能會用到許多條件判斷,JSX的方法就很是糟糕了。寫循環的方式更像個笑話。固然你能夠換個模板系統,從React棧中去掉JSX,也能夠在Vue中使用JSX,但那並非在學習框架時首先學習的方法,所以這裏不作討論。
另外一點是,Vue並不要求你必須使用setState或任何相似的方法。固然你仍是要在data方法中定義全部的state屬性,但若是你忘了定義,那麼控制檯中就會顯示提示。剩下的會自動內部處理,只須要在組件中修改值便可,跟使用普通的 Javascript 對象同樣。
使用 React 會遇到不少錯誤。就算實際的原理很簡單,這些錯誤也會減慢學習的進度。
至於簡潔性,用 Vue 寫出的代碼要比其餘框架寫出的代碼要小不少。這是 Vue 框架最好的一點。一切都很簡單,只需幾行簡明易懂的代碼就能夠編寫出複雜的功能。而使用其餘框架,你須要多寫 10%、20% 甚至 50% 的代碼。
使用 Vue 也不須要學太多東西。一切都很直觀。書寫 Vue.js 代碼可以以最接近的方式表達思想。
Vue 的這種易用性是個很是好的工具,使得接受 Vue 變得容易,也利於團隊溝通。不管是你要改變技術棧的其餘部分,仍是須要在緊急情況下向團隊裏增長更多人,或者解釋你的產品,Vue 都能節約你的時間,從而節約金錢。
時間估算也很容易,由於實現功能所需的時間不會超過開發者估算的時間,從而致使更少的誤解、錯誤或樂觀估計。Vue 須要理解的概念更少,使得與項目經理之間的溝通更容易。
結論
不管是從大小、性能、簡單性仍是學習曲線上來看,擁抱 Vue.js 絕對是如今最好的選擇,能同時解決時間和金錢問題。
它的輕量化和性能使得你能夠同時在項目中使用兩個框架(如Angular和Vue),所以更容易移植到 Vue。
至於社區和流行度,即便 Vue 如今得到了不少關注,但還很難說它達到了 React 的流行程度。但一個沒有大型 IT 公司支持的框架能如此流行,這個事實自己就值得關注。它的市場佔有率已經迅速從一個鮮爲人知的項目成長爲一個前端開發中的最大的競爭者。
Vue 上的模塊數量也在飛速增加,並且就算你找不到你須要的模塊,本身寫一個也不會花太多時間。
這個框架使得理解、分享和編輯變得容易。不只閱讀他人的代碼會變得很容易,修改他人的實現也不難。有了 Vue,我只用了幾個月的時間,就能夠自信地處理各個子項目,和外部人員對項目作出的改動。它爲我節省了時間,使我能專一於系統設計上。
React 從設計上要求使用 setState 等輔助函數,而編程時確定會有忘記使用的時候。還須要花很大精力去編寫模板,編寫模板的方式也會讓項目變得難以理解和維護。
考慮到在大型項目中使用這些框架,使用 React 時你須要掌握其餘庫,並教給你的團隊怎樣使用。還要處理各類相關的問題(甲不喜歡這個庫,乙不理解那個庫等)。Vue 棧更簡單,更適合團隊使用。
做爲開發者,我感到高興、自信和自由。做爲項目經理,我能夠更容易地與團隊進行計劃和溝通。做爲自由職業者,我省下了時間和金錢。
固然還有許多 Vue 沒有覆蓋到的需求(特別是若是你要構建原生應用的時候)。在那些領域 React 作得很好,但 Evan You 和 Vue 團隊已經在着手解決這些問題了。
React 因爲它很好的概念和這些概念的實現而流行。但如今看來,它的概念混亂得一團糟。
寫 React 代碼的時候成天都要應付各類臨時對策(參考「代碼清晰度」一節),努力寫出有意義的代碼,最後獲得的只能是一團誰也看不明白的解決方案。就連你本身,過幾個月以後這個解決方案也很難再讀懂。你爲了發佈項目而不得不作出辛苦的努力,而獲得的只是一個難以維護、充滿錯誤的東西,連修改它都要通過一番培訓才行。
這些負面因素是任何人都不但願在項目中看到的。爲何還要應付這些麻煩呢?就爲了社區和第三方庫?爲了得到一小部分好處,咱們要承受太多痛苦,而就連這一小部分好處,也愈來愈變得不重要。
React 曾經讓個人生活更容易,但在某些方面又讓實現變得更復雜。多年之後,Vue 終於讓我獲得瞭解脫。它的實現與我想像中的開發很相近,並且在開發過程當中,除了須要實現的東西以外,基本上不須要考慮任何其餘東西。它看上去很像原生的 JavaScript 邏輯(沒有setState,也沒有用來實現條件結構的特殊用法,也沒有各類算法那)。只須要按你想像的方式寫代碼就行。它速度很快,很安全,並且能讓你高興。我很高興看到 Vue 愈來愈多被前端開發者和公司接受,我但願它能結束 React 的統治地位。
免責聲明:這篇文章是個人我的觀點,僅表達我如今的觀點。隨着技術的進步,這些觀點會發生變化(可能會變好或變壞)。
原文:https://blog.sourcerer.io/why-you-should-leave-react-for-vue-and-never-use-it-again-5e274bef27c2做者:Gwenael P,前端工程師,Vue.js的狂熱者。譯者:彎月,責編:屠敏