- 原文地址：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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。