[譯] 為什麼我放棄了 React 而轉向 Vue。

• 原文地址：Why I left React for Vue.
• 原文作者：Gwenael P
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：EmilyQiRabbit
• 校對者：luochen1992，Moonliujk

[今日隨機的開源者個人簡介：sourcerer.io/posva]

最近，在 Github 上 Vue.js 比 React 獲得更多的 star。該框架受歡迎程度近期飆升，並且由於它並沒有類似於 Facebook（React）或者 Google（Angular）這樣的公司支援，看到它從不知名的地方崛起，著實讓人驚訝。

網頁研發的進化

回顧過去的光輝歲月，在 90 年代時，我們寫網頁，就是純 HTML，以及一些簡單的 CSS 樣式。好處就是非常簡單。但缺點是許多功能的缺失。

然後有了 PHP，能寫像這樣的程式碼，我們很開心了：

來源：www.webplanex.com/blog/php-go…

這些在現在看來簡直可怕，但是在那個時候，已經是很驚人的進步了。這是它的全部意義所在：使用新的語言，框架，還有工具，我們熱衷於此，直到競爭對手做得遠遠更好的那一天。

在 React 如此流行之前，我使用的是 Ember。然後我轉到了 React，它將我們所需要的開發抽象為網頁元件，它使用虛擬 DOM 並且高效渲染，這些非常棒的方法都讓我覺得眼前一亮。雖然對於我來說並不是十全十美的，但是相比於之前我寫程式碼的方式，它已經有了巨大的進步。

之後，我決定嘗試 Vue.js，再之後我將不會回頭使用 React 了。

雖然 React 不是糟糕透了，但我發現它很笨重，難以管理，並且有時候我寫的程式碼對於我來說看上去簡直毫無邏輯可言。發現了 Vue 並知道了它是如何解決了它老哥 React 的一些問題，對我來說真是一種解脫。

讓我來解釋一下原因吧。

效能

首先，我們來討論一下體積。

由於所有 web 開發者的工作都需要考慮網路頻寬，所以限制網頁大小就很重要。網頁越小越好。現在，隨著移動端瀏覽量快速上升，這一點甚至比在之前幾年要更加重要。

事實上很難評估和比較 React 和 Vue 的體積大小。如果你想要使用 React 構建網站，你也將會使用 React-dom。同樣，它們有一系列不同的功能。但是 Vue 以輕量聞名，同時你也可能會因為使用了 Vue 而減少依賴包的大小。

關於原生效能，這裡有一些資料：

資料來源：www.stefankrause.net/js-framewor…

資料來源：www.stefankrause.net/js-framewor…

如你所見，這個基準測試詳細地說明了，相比於使用 React，使用 Vue.js 的網頁應用程式佔用的記憶體更少，執行速度也更快。

Vue 將會為你提供更快的渲染管線，幫助你構建複雜的網頁應用。由於你的專案能被更高效的渲染，你就不用那麼顧慮程式碼優化，這能夠讓你能騰出時間用於專案的更重要的功能上。移動端效能也是如此，你將不怎麼需要調整演算法來保證手機上的平滑渲染。

當你放棄 React 而選擇了 Vue.js，你就不需要在應用大小和效能之間折中。你將能兼顧應用大小和效能。

學習曲線

學習 React 是可以的。瞭解一個完全圍繞網頁元件而構建的庫是很好的事情。React 的核心是完美且穩固的，但是在我處理高階路由配置的時候我遇到了很多問題。所有這些路由版本的實際情況是什麼？目前已經到了第四版（+ React-router-dom），我最終使用的是第三版。只要你習慣了這個技術棧，選擇版本其實很容易，但是學習的過程卻很痛苦。

第三方庫

大多數近代框架都普遍遵從一個原理：核心簡單，沒有太多功能，你可以通過在它們之上配置其他的庫，來豐富它們。構建一個技術棧可以非常簡單，條件是可以毫不費力的整合其他庫，並用相同的方式為每個庫整合。對我來說至關重要是，這一步應該儘可能的簡單明瞭。

React 和 Vue 都有工具，用來幫助你使用附加的工具開啟專案配置。在 React 生態系統中，可用庫很難掌握，因為有時候很多個庫解決的是同一個問題。

在這部分，React 和 Vue 都很出色。

程式碼清晰度

我的觀點是，React 糟糕透了。JSX，寫 html 程式碼的內建語法，在清晰度方面是很讓人頭疼的。

這是一個使用 JSX 寫 “if” 條件句的常規方法：

(
	<div>
	  {unreadMessages.length > 0 &&
	    <h1>
	      You have {unreadMessages.length} unread messages.
	    </h1>
	  }
	</div>
);
複製程式碼

這則是 vue 的寫法：

<template>
	<div v-if="unreadMessages.length > 0">
	    <h1>
	      You have {unreadMessages.length} unread messages.
	    </h1>	
	</div>
</template>
複製程式碼

你將會遇到其他問題。在元件模版中呼叫方法經常會遇到無法獲取 “this” 的問題，結果是你需要手動繫結：<div onClick={this.someFunction.bind(this, listItem)} />。

在某些時候，使用 React 讓事情變得非常不合邏輯...

假設你需要在應用中寫很多條件判斷語句，用 JSX 的方法就很不好。而用這個方法來寫迴圈的話，對我來說簡直像看笑話。當然你可以改變模版系統，把 JSX 從 React 技術棧中移除，或者和 Vue 一起使用 JSX，但是當你學習一個框架的時候，這不是首先要做的事情，這不是解決問題的重點。

另一方面，使用 Vue 你不需要使用 setState 或者其他類似的東西。你仍然需要在一個 “data” 方法中定義所有狀態屬性，如果你忘了，你將會在控制檯看到提示。餘下的部分將會自動的在內部被處理，你只需要像操作常規 Javascript 物件那樣，在元件中修改屬性的值。

使用 React 你將會遇到很多程式碼錯誤。所以儘管潛在的規則其實非常簡單，你的學習程式還是會非常慢。

考慮到簡明性，使用 Vue 寫的程式碼要比使用其他框架更加輕量。這其實是 Vue 框架最棒的部分。所有的東西都很簡單，你將會發現你能夠僅使用幾行易懂的程式碼，就寫出很複雜的功能，而使用其他框架，將會多使用 10%，20%，有時候會是 50% 更多的程式碼量。

你也不需要額外學習什麼。所有的內容都很簡明直接。寫 Vue.js 程式碼可以讓你非常靠近實現你想法的最簡路徑。

這樣易用性使得 Vue 成為了一個很好的幫助你適應和交流的工具。不管是你想要修改你專案技術棧的其他部分，由於緊急情況為團隊招募更多的人，還是在產品上施展實驗，它都絕對能讓你花費更少的時間和金錢。

時間預算也非常容易，因為實現一個功能的時間不需要比開發者估計的多很多，結果就是更少可能的引起的衝突，錯誤或疏忽。要理解的概念很少，這使得與專案經理的溝通變得更加容易。

總結

不管是體積，效能，簡易性，或者學習曲線哪個方面，擁抱 Vue.js 吧，這絕對是當前非常好的選擇，讓你能夠節省時間和金錢。

它的重量和效能也讓你能夠有一個同時使用兩個框架（比如 Angular 和 Vue）的網路專案，這將能讓你輕鬆的轉型到 Vue。

考慮到社群和使用者量，現在即使是 Vue 也有了更多人給的 star，但我們也不能說它已經趕上了 React。但是事實上一個框架沒有 IT 巨頭公司在後面支援卻如此流行，它也是絕對足夠好而值得一看的。在前端開發的領域，它的市場佔比已經很快的從一個不知名的專案成長為一個很強的競爭者。

建立在 Vue 基礎上的模組正在激增，而如果你沒有找到你個能夠滿足你需求的，你也不會花太長的時間去開發出你所需要的那個。

這個框架讓理解，分享和編輯都變得容易。你在研究其他人的程式碼的時候不僅會覺得很舒適，而且還能很容易的修改他們的實現方法。幾個月的時間，Vue 讓我在處理專案的子專案和外部貢獻者的時候自信了很多。它為我節省了時間，讓我能專注於我真正想要設計的事物。

React 被設計為需要使用像 setState 這樣的幫助方法，你將會忘記去用他們。你在寫模版的時候會很痛苦，這樣寫將會讓你的專案很難被理解，很難維護。

關於在大型專案中使用這些框架，如果使用 React 你將會需要管理其他庫並且訓練你的團隊也去使用。這會導致很多連帶的問題（X 不喜歡這個庫，Y 不懂那個庫）。Vue 技術棧則簡單很多，對團隊大有好處。

作為開發者，我感到愉悅自信和自由。作為專案經理，我能和我的團隊更加輕鬆的計劃和交流。作為自由職業者，我節省了時間和金錢。

Vue 依舊有很多沒有覆蓋到的需求（特別是如果你想要構建本地應用）。在這個領域 React 的效能很好，但是 Evan You 和 Vue 團隊也已經在這方面作出努力了。

React 很流行，因為它的一些很好的觀念以及觀念實現的方法。但是回頭看看，它卻看起來像在一個混亂海洋裡的一堆點子。

寫 React 程式碼就是整天在尋找解決辦法（可以比照“程式碼清晰度”那部分），在已經有意義的程式碼上掙扎，最後破解了它併產生了一個真的很不明確的方案。這個方案在你幾個月後回頭重新看它的時候將會非常難以閱讀。為了釋出專案你需要更努力的工作，並且它還會很難維護，會出錯，並且需要很多的學習才能修改。

沒人想要這些缺點在自己的專案裡出現。為什麼你還要繼續面對這些問題呢？社群和第三方庫？每天都變得不那麼成問題的幾點，卻可以讓你避免這麼多痛苦。

這麼多年一直和框架打交道，它們有時候讓我的生活更輕鬆，有時候實現一個功能卻複雜很多，這之後 Vue 對我來說是一種解脫。實現方法和我計劃如何開發功能很接近，然後開發過程中，除了你真正想要實現的東西，幾乎沒有什麼特別需要思考的。它和原生的 Javascript 邏輯非常相近（不會有 setState，實現條件語句的特別方式以及演算法）。你只需要隨心所欲的寫程式碼。它快速，安全，讓你愉快 :D。我很高興看到 Vue 正在被更多的前端開發者和公司接納，我希望它能夠很快終結 React。

免責宣告：這篇文章僅代表我個人此刻的看法。隨著科技的進步，它們也將會改變（更好或者更壞）。

[編輯] 根據 James Y Rauhut 的意見，修改了題目。

[編輯] 修改了談論關於比較框架大小的段落。正如文章指出的，評估很困難，並且基於需求不同，也經常會在人和框架之間引起爭論。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。