[譯] Vue.js 仍是 React？你會選擇哪個？爲何？

• 原文地址：Vue.js or React ? Which you would chose and why?
• 原文做者：evilpingwin
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：allenlongbaobao
• 校對者：KyleLan329、weberpan

Vue.js 仍是 React？你會選擇哪個？爲何？

二者之間的區別頗有意思，但不只僅侷限於 JSX 與 Templates 或者豐富的 API 與少許的 API 的區別。React 和 Vue 二者之間的選擇可能致使大相徑庭的結果，這一點在你一開始選擇的時候可能並無意識到。當選擇一個框架的時候，一個重要的問題是「我但願項目的複雜性在哪一個部分」。

React 和 Vue 能夠完成不少相同的東西，但它們的實現方式大相徑庭。從一些反饋來看，我很好奇是否有人真的同時使用這兩個框架來作一些東西，而不是寫一些簡單的組件，只有那樣才能透過表面膚淺的差別，真正瞭解二者之間的內在區別。

不知你是否知道，Vue 深化了單文件組件的思想。一個文件由模版、腳本、樣式，這些相互獨立的模塊組成。有人發現這種方式開發起來很舒服，由於每一個模塊的開發和傳統的前端開發流程類似。我我的很喜歡這種模塊，不是由於它「長得像 html」，而是它就像頁面上的地標同樣，井井有條，容易識別，經過地標就能很快地尋找到文件自己。React 中 JS 和 JSX 的組合運行得很好，但仍是有點混亂（特別是當你添加樣式組件到組合中去的時候）。而你無視這些，並習慣它了。有必要指出的是：React 使用 SFC（無狀態組件）時須要一個編譯步驟，但 Vue 不須要。正由於 JSX 須要一個編譯步驟，因此當你考慮用 React 時你要多加考慮。若是你想要在不須要編譯的前提下把幾個 script 文件合併到一個項目中，那麼 React 真的不是一個很好地選擇，除非你打算放棄 JSX 改用 React.createElement()。這種狀況下，Vue 是顯而易見更好的選擇。

關於 Vue 的其餘評論是：它使用了 DSL(領域專用語言) 而且有大量的 API。二者都是真的，至少它的 API 比 React 要多，但相對於其餘的庫來講，它仍是算少的。這兩個狀況是分離但相關的。Vue 使用的 DSL 只是另外一個抽象概念，就像 SFC 同樣。它們被設計出來是爲了你能更加高產，並使你的代碼保持整潔，表述清晰。JXS 的存在是一樣的緣由，它也是非標準化抽象，可是容許你發揮 JavaScript 所有的能量。JSX 不是 JavaScript，而且永遠不會是，好比說 airbnb 的代碼風格指南禁止在 .js 文件中包含 JSX，由於它們是非標準化的。它們必須在本身的 .jsx 文件中運行。

一旦你知道 Vue 的 DSL 包含了一系列輔助方法和簡寫來讓你更高效，那要不要選擇它就看你我的喜愛了。換句話說（譯者注：若是選擇 Vue）你有更多的特殊語法要學。有的人討論學習新的 API 會帶來認知上的負擔，這個質疑是有必要的（雖然我存有異議），可是我會和他們爭論：正因如此，反過來講，簡單的 API 意味着咱們須要使用相對複雜的模式去完成特定的內容，React 所以也給咱們帶來大量認知負擔。我會解釋這個。~咱們不要忘記 React 的 API 數量在不斷增長，並以合理的速度持續增長。咱們最近得到了 context API，在未來的某個時間點，咱們還將得到 Time Slicing 和 Suspense。~ 另外要注意到，React 一樣被驅動着更新。React 團隊很在乎用戶的須要，而且在他們以爲有意義的地方作出改變。Context、Time Slicing、Suspense 這些特性已經或者即將被添加。儘管這樣，React API 仍然可能保持簡潔並且只有當有意義的時候，特性纔會被添加。

值得一提的是，Vue 的文檔是 API 文檔的典範，它極其簡潔。React 文檔在平均水平，也還能夠，它的 API 更簡單因此按道理說你不須要過多地查閱文檔。這一評論已經被批評了，但我堅持這一點，由於其餘文檔太糟糕了，也沒讓 React 文檔看上去很好，相對於 Vue，它們確實很通常。我不是說 React 的文檔特別糟糕，只是相對於你所期待的優秀的庫而言，它很通常。

下面讓咱們來討論抽象。全部的前端框架都在作抽象，有的抽象到更高的層級，有的更低。使用純 JS 以聲明式的風格來寫 UI 組件是極其困難的，因此 React 和 Vue 提供了不少方法來作到這一點，並帶上許多有用的插件，容許咱們綁定狀態到 DOM，而無需存儲狀態到 DOM，以及在內容變化時能夠高效地渲染。

全部的這些意味着，若是你不想，你沒必要使用 Vue 的模板和 DSL。你能夠只使用 React 中的 JSX 或者 createElement() 函數。你也能夠本身選擇模板語言，好比 Pug。不知你有沒發現，Vue 在這方面很是靈活。它可以使用 SFC 來寫真正的 UI 組件，只用 JS 來寫非渲染組件（只輸出 script 代碼塊，不包括 template 和 style），而後根據你的須要切換到 JSX 或者渲染函數。這種方法會給予你對工做方式難以置信的控制力，並讓你的代碼保持整潔。

當你開始寫更加高級的組件或者想要寫真正的可複用組件（特別是那種包裝其餘組件爲它賦能的組件），你會開始發現一些明顯的區別。使用 React，你須要使用一個或多個高階組件，render props 或者函數做爲子組件的開發模式。這些模式沒有任何問題，對於現實問題它們是很好地解決方式，但它們增長了明顯的認知困難（比學習新的語法更加多），由於它們真的是很複雜的模式。使用 Vue，這些模式沒有必要，由於它有更多的 API，暴露了一系列傳遞數據的方法（若是你有興趣的話瞭解一下嵌套插槽）。這意味着在 Vue 中，你可使用上面那些模式，也可使用其餘形式的模式（嵌套插槽相似於 render props）。

這不是說 Vue 比 React 簡單，也不是說 React 特別讓人疑惑（嵌套插槽至少和 render props/ FaCC 同樣複雜）。不少人忽略的關鍵點是使用 React 你須要儘快學會這些模式（不少流行的庫使用它們），可是 Vue 中的嵌套插槽使用得不是很頻繁。這一點有不少理由，再次說明，重要的區別不在於這些框架各自能作些什麼，而是解決普通問題使用到複雜模式的頻率。

它們都是擁有各自優勢的強大框架，任何你可使用一個作到的事，另外一個也能夠（真的不少）。React 擁有更大的生態系統以及更好的工具，擁有更多的工做機會。Vue 更容易上手，擁有出色的靈活性，它的 API 能讓你避免使用 React 中的一些複雜模式，它以一種更符合語言習慣的 'Vue' 的方式運行。好比向父組件傳遞消息，而不是將回調函數做爲屬性向下傳遞。它能讓你的代碼更整潔，但這也是額外的抽象。Vue 還有更多核心庫，和 Vue 緊密結合在一塊兒，它們運行的方式和其餘框架的相似方法基本相同。React 擁有的核心庫少一些（Vue的一些標準函數到了 React 就須要引一個庫，好比檢查 prop 類型），但整體上擁有的庫卻更多（由社區提供）。值得牢記的是，隨着生態圈的發展，你最終能獲得大量作相同事情的庫，我在 React 或者 Vue 中使用的大多數庫拋開樣式寫法基本上和你選用的框架（React 仍是 Vue）無關（React 會讓你從新思考樣式佈局，這不是一件壞事），因此你達成目標須要作的事可能會發生變化。在我看來，一個強大的生態系統的最終影響是，你面臨的問題極可能別人已經解決了，這是 React 的流行帶來的巨大紅利，，也是重要的考慮因素。

我兩個都使用，也都很喜歡。它們用不一樣的方式讓我困惑。它們都有各自的特性你須要去習慣。若是我不得不選擇一個？我會選擇 Vue。但這並不意味着你應該選。親自去試試，看看你感受怎麼樣。對於任何嚴厲的批評或者太高的讚許都要保持懷疑態度，由於它們都是由真正聰明的人開發的優秀框架，你選擇任何一個都不會太差。我已經試着保持中立，給出重要的區別。我可能已經失敗了，由於有些東西在一個框架讓人很惱火，而另外一個框架不會。

做者按：我忘了提到 vue-cli，它相似於 create-react-app+。這真的是一個很是棒的工具，可以快速創建可視化 UI，這一點頗有趣。因此從某種意義上來講，Vue 中的工具真的很棒。我一樣忘了提 Typescript 在 Vue 中的整合目前還不是很好，可能在 React 中會有更好的 TS 體驗。值得繼續深究。

去嘗試吧。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

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