下文將在學(xué)習(xí)曲線、代碼風(fēng)格、單個文件組件、性能、靈活性、工具、移動開發(fā)、社區(qū)、成熟度、團隊支持等方面對 React 和 Vue 進行比較。
React
React 的官方文檔為新手提供了一些入門指南，具有一定前端框架開發(fā)經(jīng)驗的開發(fā)人員可以在幾個小時內(nèi)理解框架的核心原理。
官方的 React 文檔算是比較完整地，但不如 Vue 的官方文檔那么清晰有序。文檔涵蓋了必要的一些流程，但仍然缺少一些邊緣用例說明。隨著項目越變越大，這些邊緣用例會變成用戶痛點。
React 不算是一個完整的框架，它提供了核心，而其他大多數(shù)高級的組件是由社區(qū)開發(fā)的，這無疑給學(xué)習(xí)曲線增加了一些復(fù)雜性。
Vue
Vue 庫可以簡單地作為 HTML 頁面資源加載，因此，使用 Vue 無需額外的構(gòu)建步驟?？梢娺@個庫有多么的低調(diào)，不知不覺中為我們節(jié)省了很多時間。
因為 Vue 與 React 有一些通用的概念，開發(fā)人員從 React 轉(zhuǎn)到 Vue 會相對容易。另外，Vue 的官方文檔寫得非常詳盡，涵蓋了開發(fā)人員在開發(fā) Vue 應(yīng)用程序時需要的所有內(nèi)容。
Vue 的定義比 React 更嚴(yán)格。在 Vue 中，很多問題直接在文檔中得到了解答，不需要在其他地方搜索答案。
React
React 引入了一系列基于函數(shù)式編程的概念，簡化了 UI 應(yīng)用程序的開發(fā)過程。最值得注意的是：
JSX 支持在 JavaScript 代碼中編寫 HTML，它也是 React 作為函數(shù)式編程范式的強大推動力之一，在這個領(lǐng)域內(nèi)，它是佼佼者。
它的組件生命周期提供了一種直觀的方式來連接組件“生命周期”中的特定事件（如創(chuàng)建、更新等）。
Vue
作為一個比 React 和 Angular 都更年輕的框架，Vue 從它們那里借鑒了好的部分，是函數(shù)式和面向?qū)ο缶幊痰幕旌象w。
默認(rèn)情況下，Vue 的編碼風(fēng)格在某些方面與 Angular 有點相似，同時又消除了 Angular 的大部分痛點。Vue 將 HTML、JS 和 CSS 分開，就像 Web 開發(fā)人員已習(xí)慣了多年的傳統(tǒng)開發(fā)方式，但如果你喜歡，也可以使用 JSX。
Vue 的組件生命周期比 React 更直接和直觀。一般來說，Vue 的 API 比 React 更寬泛但更簡單。
React
在 React 中，因為使用了 JSX，單文件組件是作為 JavaScript 模塊而存在的，因此，React 提供了特定的方式來編寫 HTML、CSS 和 JavaScript。
使用 JavaScript 編寫所有的東西可以減輕在組件內(nèi)部創(chuàng)建動態(tài) HTML 的負(fù)擔(dān)。當(dāng)然，在使用 JSX 時，可以使用純 JavaScript 來生成模板。
也就是說，因為 React 的特殊語法，在 React 中編寫組件需要更多的學(xué)習(xí)和練習(xí)。
Vue
Vue 的單文件組件分為三個獨立的部分：< template="">、< script="">和< style="">，每個部分都包含相應(yīng)類型的代碼，因此對于傳統(tǒng)型 Web 開發(fā)人員來說會更自然。
作為一個漸進式框架，Vue 提供了簡單的定制能力。例如，只需要一個簡單的配置，就可以使用 JSX 代替< template="">。另外，只需要在< style="">中添加 lang=“scss”屬性，就可以編寫 SCSS 而不是純 CSS。類似地，將scoped 屬性添加到< style="">中，Vue 組件就可以實現(xiàn)開箱即用的 CSS 作用域（也就是 CSS 模塊）。
React 的 JS/JSX 組合使用起來沒什么問題，只是有時候顯得有點混亂（特別是在添加樣式組件時）。需要指出的一點是，在使用 SFC 時需要額外的構(gòu)建步驟，而 Vue 不需要。如果你選擇了 React，這可能會是一個問題，因為 JSX 需要額外的構(gòu)建步驟。如果你希望可以直接將腳本文件加入項目中而不需要重新構(gòu)建，那么 React 可能不是你的菜，除非你愿意使用 React.createElement() 代替 JSX。所以，在這種情況下，Vue 可能是更好的選擇。
React
庫大?。ㄍㄟ^網(wǎng)絡(luò)傳輸 / 未壓縮）：32.5KB/101.2KB。
在 DOM 操作方面，React 的整體性能非常好。它比 Angular 快得多，但比 Vue 慢一些。
React 提供了開箱即用的服務(wù)器端渲染（SSR）支持，這對某些類型的實現(xiàn)來說可能很有用。
內(nèi)置支持捆綁和搖樹優(yōu)化（tree-shaking），以便最大限度地減少最終用戶的資源負(fù)擔(dān)。
Vue
庫大?。ㄍㄟ^網(wǎng)絡(luò)傳輸 / 未壓縮）：31KB/84.4KB。
除了速度快，Vue 還是一個漸進式框架。它的核心庫只專注于視圖層，所以可以輕松上手，并與其他庫或現(xiàn)有項目集成在一起。
與 React 類似，Vue 內(nèi)置支持捆綁和搖樹優(yōu)化，以便最大限度地減少最終用戶的資源負(fù)擔(dān)。
React
React 專注于 UI，所以在構(gòu)建 UI 組件時可以從它那里獲得很好的支持。
React 官方庫不提供一些高級功能，如狀態(tài)管理。大多數(shù) React 應(yīng)用程序都使用 Redux 進行狀態(tài)管理，而 MobX 也正在獲得人們的關(guān)注。
router 不屬于官方庫的一部分，而是作為第三方包，由 React 團隊提供支持。
Vue
作為一個漸進式框架，Vue 只允許使用最基本的功能來構(gòu)建應(yīng)用程序，但同時也提供了一些開箱即用的東西：用于狀態(tài)管理的 Vuex、用于應(yīng)用程序 URL 管理的 Vue Router、Vue 服務(wù)器端渲染。
React
React 有一個叫作 create-react-app 的第三方 CLI 工具，可作為在 React 項目中構(gòu)建新應(yīng)用程序和組件的腳手架。
CLI 工具還支持運行單元測試和端到端測試、代碼 linting 和本地開發(fā)服務(wù)器。
在 IDE 方面，React 官方和社區(qū)都提供了非常好的支持。
Vue
Vue 有一個叫作 Vue CLI 的官方 CLI 工具，與 React 的 create-react-app 非常相似，Vue CLI 為新開發(fā)的應(yīng)用程序提供了腳手架。
此外，主要的 IDE 對 Vue 都有很好的支持（不如 React，但有 WebStorm 和 VSCode 坐鎮(zhèn)）。
在某些方面，Vue 的工具真的很棒。另外，Vue 與 Typescript 的集成現(xiàn)在還不完美，如果考慮與 TS 集成，還是選擇 React。
React
React 有一個用于構(gòu)建原生移動應(yīng)用程序的移植版本，也就是 React Native，它是當(dāng)前“編寫一次（在 JavaScript 中），到處使用（在原生 iOS 和 Android 中）”的解決方案。
生產(chǎn)環(huán)境中有很多使用 React Native 構(gòu)建的應(yīng)用程序。
Vue
對于 Vue 來說，構(gòu)建移動原生應(yīng)用程序不僅只有一種選擇。與 React Native 不一樣的是，在 Vue-Mobile-Native 領(lǐng)域并沒有明確的領(lǐng)導(dǎo)者。
NativeScript 可能算得上是佼佼者（它也是 Angular 的領(lǐng)先解決方案），但除此之外還有 Weex 和 Quasar。
React
在 StackOverflow 網(wǎng)站上，使用 #reactjs 標(biāo)記的大概有 88,000 個問題。超過 40,000 個 npm 包可供 React 開發(fā)人員下載使用。
在最近的一個有關(guān)前端工具調(diào)查中，超過 40％的受訪者表示他們對使用 React 感到滿意。
React 的社區(qū)確實很重要，但比 Vue 社區(qū)更分散，而且很難為常見問題直接找到答案。
Vue
在 StackOverflow 網(wǎng)站上，使用 #vue 標(biāo)記的問題有 18,000 個。可安裝的 npm 包有近 10,000 個。
在最近的一次調(diào)查中，17％的受訪者表示他們對使用 Vue 感到滿意。但事實上，與 React 相比，有兩倍的開發(fā)人員表示對學(xué)習(xí) Vue 感興趣，因此 Vue 開發(fā)人員市場的增長在未來可能會比 React 更快。
在 GitHub 上，Vue 的 Star 數(shù)超過了 React。
Vue 開發(fā)中的大多數(shù)問題都可以直接在文檔中找到答案，當(dāng)然，來自社區(qū)的答案會更加精準(zhǔn)。
React
React 于 2013 年 3 月發(fā)布。
SimilarTech 的數(shù)據(jù)顯示，React 已經(jīng)被用在 205,000 個領(lǐng)域中，每月增長率為 2.46％。
React 在生產(chǎn)方面經(jīng)過了很好的測試，超過了 Vue。React 建立了一個龐大的社區(qū)，背后有 Facebook 在撐腰。
Vue
Vue 于 2014 年 2 月發(fā)布。
SimilarTech 的數(shù)據(jù)顯示，Vue 已經(jīng)被用在 26,000 個領(lǐng)域中，每月增長率為 3.34％。
大約一年半前，Vue 成為了一個標(biāo)準(zhǔn)。它已被廣泛使用，包括一些大公司，如 GitLab、阿里巴巴、百度等。
React
React 由 Facebook 創(chuàng)建和維護，在 Facebook，有一個團隊定期為 React 提供支持（React 也被用于 Facebook 的很多項目中）。
據(jù)稱，F(xiàn)acebook 的 React 團隊包括 10 名專職開發(fā)人員。但值得注意的是，F(xiàn)acebook 研發(fā)部門的多個團隊正在將 React 用于內(nèi)部和外部的項目中，并且每個團隊都可以將變更請求推送到代碼庫中。
React 基于 RFC，沒有所謂的發(fā)展路線圖。
Vue
Vue 是一個獨立的庫，由尤雨溪創(chuàng)建。他還負(fù)責(zé)管理 Vue 的維護和發(fā)展路線圖。
Vue 團隊包括 23 名專職開發(fā)人員。
Vue 的路線圖可以在他們的 GitHub 倉庫中看到（https://github.com/vuejs/roadmap）。
React
因為 React 是目前最流行的框架，所以 React 開發(fā)人員在市場中頗具優(yōu)勢。
此外，通過學(xué)習(xí) React，可以讓開發(fā)人員的簡歷錦上添花，因為他們將獲得有關(guān) React 的寶貴經(jīng)驗。
Vue
Vue 是前端行業(yè)的新“熱點”。當(dāng)然，它也有自己的缺點，不過一直以來，Vue 持續(xù)獲得關(guān)注，并且開發(fā)人員都急切地想?yún)⑴c Vue 項目，唯恐落于人后?，F(xiàn)在，找到對 Vue 有一定經(jīng)驗的開發(fā)人員并不罕見。
React
行業(yè)標(biāo)準(zhǔn)
大量熟練使用該框架的前端開發(fā)者
更容易招到有經(jīng)驗的前端開發(fā)者
有穩(wěn)定的過去和大公司的支持，更安全的未來和穩(wěn)定性
龐大的社區(qū)，大量的工具和第三方庫
Web 和移動應(yīng)用可以共享一些代碼
Vue
Vue 內(nèi)置的核心模塊（Vuex、Router 等）非常棒
面向“未來”，而不是“現(xiàn)在”
保持獨特，引領(lǐng)潮流而不是跟隨
更快的起步，前端開發(fā)者和后端開發(fā)者都感覺 Vue 代碼很自然，速度很快
更好地促進全棧文化，允許跨產(chǎn)品開發(fā)
React
前端開發(fā)者和后端開發(fā)者之間區(qū)分得很清楚，需要很多學(xué)習(xí)才能成為專家
需要更多的時間來訓(xùn)練開發(fā)者
交付較慢（至少對于最初的發(fā)布來說）
Vue
更具實驗性，不是冒險，而是前衛(wèi)
更難找到經(jīng)驗豐富的 Vue 開發(fā)者
可用的插件和工具更少，社區(qū)更小。
開發(fā)者不像 React 那樣有那么多經(jīng)驗
Vue 使用了 DSL 并且具有較大的 API 表面，這也是人們認(rèn)為不好的地方。這些都是事實，至少它具有比 React 更大的 API 表面。Vue 使用的 DSL 是另一種抽象，就像 SFC 一樣。它們旨在提高你的開發(fā)效率并保持代碼的整潔。JSX 的存在也是出于同樣的原因，它也是一種非標(biāo)準(zhǔn)的抽象，但同時又能讓你充分利用 JavaScript 的全部威力。但 JSX 不是 JavaScript，而且永遠(yuǎn)不會是。Airbnb 的樣式指南禁止在.js 文件中包含 JSX，因為它們是非標(biāo)準(zhǔn)的，它們必須被包含在單獨的.jsx 文件中。
一旦你熟悉了 Vue 的 DSL，就可以提高開發(fā)效率，因為它提供了很多輔助方法。另一方面，你也需要學(xué)習(xí)很多 Vue 的特定語法。有些人認(rèn)為學(xué)習(xí)新 API 需要額外的認(rèn)知成本，這是無可厚非的。因為 React 同樣引入了重大的認(rèn)知成本，而原因卻恰恰相反，它的小 API 表面意味著，為了完成某些功能，我們需要使用相對復(fù)雜的模式。但請記住一點，React 也一直在演化。React 團隊一直在響應(yīng) React 用戶的需求，并在他們認(rèn)為有意義的地方做出改進。Context、Time Slicing、Suspense，這些特性已經(jīng)或者即將被添加進來。
接下來讓我們談?wù)劤橄?。這些前端框架都做到了或多或少的抽象。使用純 JS 開發(fā)聲明式 UI 組件非常困難，于是 React 和 Vue 出現(xiàn)了，它們還提供了一系列有用的補充，讓我們可以將 State 綁定到 DOM，而不需要將它們保存在 DOM 中，并進行高效的渲染。
也就是說，如果你不想，也可以不用 Vue 的模板和 DSL，如果你想，也可以使用 React 的 JSX 或 createElement() 函數(shù)。你還可以自己選擇模板語言，如 Pug。Vue 在這方面非常靈活，不知道人們是否也意識到了這一點。使用 SFC 編寫真正的 UI 組件，使用純 JS 編寫無渲染組件（只導(dǎo)出沒有模板或樣式的腳本塊），然后根據(jù)需要切換到 JSX 或渲染函數(shù)，這樣給了你更大的控制權(quán)，并保持代碼的整潔。
當(dāng)你開始編寫更高級的組件或真正可重用的組件（特別是包裝其他組件的組件，為其他組件提供額外的行為）時，就可以看到一些很明顯的差別。在使用 React 時，你需要用到高階組件、渲染屬性或函數(shù)子組件模式。這些模式完全沒有問題，它們可以解決真正的問題，但它們增加了顯著的認(rèn)知成本（比學(xué)習(xí)新語法的成本更高），因為它們都是相對復(fù)雜的模式。在 Vue 中，較大的 API 表面提供了很多傳遞數(shù)據(jù)的方法（如作用域槽，scoped slot），所以幾乎不需要用到那些復(fù)雜的模式。
當(dāng)然，這并不是說 Vue 就一定比 React 簡單，或者說 React 就特別令人困惑。但人們可能忽略了很重要的一點，就是在使用 React 時，很快就會用到這些復(fù)雜的模式，而 Vue 的作用域槽卻不會被經(jīng)常用到。造成這種情況的原因有很多，但重要的不在于它們能做什么，而在于在解決常見問題時，是不是經(jīng)常要用到復(fù)雜的解決方案。
React 有更大的生態(tài)圈和更好的工具，外面有更多面向 React 開發(fā)人員的工作崗位。Vue 更容易上手，并提供了強大的靈活性和 API，可以避免 React 的那些復(fù)雜模式。有些機制——比如向父組件發(fā)送事件而不是將回調(diào)作為屬性傳遞——可以讓代碼更清晰，但同時也是一個額外的抽象。
Vue 有更多與 Vue 緊密集成的核心庫，而 React 的核心庫較少，但一般性用途的庫較多，通常由社區(qū)開發(fā)。隨著生態(tài)系統(tǒng)的發(fā)展，最終會有大量的庫做大致相同的事情。大型生態(tài)圈最重要的作用在于，某人可能已經(jīng)解決了你正面臨的問題，所以，從這方面來說，擁有更大生態(tài)圈的 React 占據(jù)了優(yōu)勢，也是一個重要的考慮因素。
在很長一段時間內(nèi)，React 和 Angular 都是框架游戲的主要參與者，而且每隔一小段時間就會出現(xiàn)一個新框架。它們試圖擠進來分一杯羹，但都沒有成功，除了 Vue。
React 是現(xiàn)在的領(lǐng)頭羊，無論是在行業(yè)炒作還是社區(qū)支持方面。React 可以輕松構(gòu)建復(fù)雜而直觀的 Web 和移動應(yīng)用程序，但這是有代價的——框架的復(fù)雜性和樣板代碼。小型項目相對直觀，但大型項目往往變得很復(fù)雜。React 引入了很多新的范式，這對學(xué)習(xí)曲線有一些負(fù)面影響。
Vue 更加精簡，是一個新穎的框架，而且非常簡單易學(xué)，樣板代碼非常少，性能高，靈活且完整。現(xiàn)在很多 Web 應(yīng)用程序可以使用 Vue 構(gòu)建，并且速度比 React 快。Vue 很有趣，開發(fā)起來也很簡單。
最近，前端社區(qū)內(nèi)開始出現(xiàn)的關(guān)于 Vue 穩(wěn)定增長的良好氛圍，暗示著 Vue 很快就會變得像 React 一樣受歡迎。
https://medium.com/fundbox-engineering/react-vs-vue-vs-angular-163f1ae7be56
https://www.reddit.com/r/javascript/comments/8o781t/vuejs_or_react_which_you_would_chose_and_why/e01qn55
聯(lián)系客服
