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