[譯] 爲何我放棄了 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。