每個前端開發(fā)人員都聽說過三個用于構(gòu)建 Web 應(yīng)用程序的框架：React、Vue.js和Angular。
React 是一個 UI 庫，Angular 是一個成熟的前端框架，而 Vue.js 是一個漸進(jìn)式框架。
它們幾乎可以互換使用來構(gòu)建前端應(yīng)用程序，但它們并非 100% 相同，因此比較它們并了解它們的差異是有意義的。
每個框架都是基于組件的，并允許快速創(chuàng)建 UI 功能。
然而，它們都有不同的結(jié)構(gòu)和架構(gòu)——所以首先，我們將研究它們的架構(gòu)差異以了解它們背?后的哲學(xué)。
架構(gòu)
React
React 不強制執(zhí)行特定的項目結(jié)構(gòu)，正如您從下面的官方“Hello World”示例中看到的那樣，您只需幾行代碼即可開始使用 React。
ReactDOM.render(
<h1>你好，世界！</h1>,
document.getElementById('root')
);
React 可以用作 UI 庫來渲染元素，而無需強制執(zhí)行特定的項目結(jié)構(gòu)，這就是它不是嚴(yán)格意義上的框架的原因。
React Elements是 React 應(yīng)用程序的最小構(gòu)建塊。它們比 DOM 元素更強大，因為 React DOM 確保在發(fā)生變化時有效地更新它們。
組件是更大的構(gòu)建塊，定義了在整個應(yīng)用程序中使用的獨立且可重用的部分。它們接受稱為 props 的輸入并生成元素，然后顯示給用戶。
React 基于 JAVAScript，但它主要與JSX (JavaScript XML)結(jié)合，這是一種語法擴(kuò)展，允許您創(chuàng)建同時包含 html 和 JavaScript 的元素。
您使用 JSX 創(chuàng)建的任何內(nèi)容也可以使用 React JavaScript API 創(chuàng)建，但大多數(shù)開發(fā)人員更喜歡 JSX，因為它更直觀。
Vue
Vue.js 核心庫只關(guān)注視圖層。之所以稱為漸進(jìn)式框架，是因為您可以使用官方和第三方包（例如Vue Router或Vuex ）擴(kuò)展其功能，將其轉(zhuǎn)變?yōu)閷嶋H框架。
雖然 Vue 與 MVVM（Model-View-ViewModel）模式?jīng)]有嚴(yán)格關(guān)聯(lián)，但它的設(shè)計部分受到了它的啟發(fā)。使用 Vue，您將主要在 ViewModel 層上工作，以確保以允許框架呈現(xiàn)最新視圖的方式處理應(yīng)用程序數(shù)據(jù)。
Vue 的模板語法讓您可以創(chuàng)建 View 組件，并將熟悉的 HTML 與特殊指令和功能相結(jié)合。這種模板語法是首選，即使原始 JavaScript 和 JSX 也受支持。
Vue 中的組件很小，是自包含的，并且可以在整個應(yīng)用程序中重復(fù)使用。帶有擴(kuò)展名的單文件組件(SFC).vue包含 HTML、css 和 JavaScript，因此所有相關(guān)代碼都位于一個文件中。
SFC 是在 Vue.js 項目中組織代碼的推薦方式，尤其是大型項目。需要使用 Webpack 或 Browserify 等工具將 SFC 轉(zhuǎn)換為可用的 JavaScript 代碼。
Angular
在本文中，我討論的是 Angular 2，而不是現(xiàn)在稱為 AngularJS 的框架的第一個版本。
AngularJS，原始框架，是一個MVC（模型-視圖-控制器）框架。但是在Angular 2 中，與 MV*-patterns 沒有嚴(yán)格的關(guān)聯(lián)，因為它也是基于組件的。
Angular 中的項目被組織成模塊、組件和服務(wù)。每個 Angular 應(yīng)用程序至少有一個根組件和一個根模塊。
Angular 中的每個組件都包含一個模板、一個定義應(yīng)用程序邏輯的類和元數(shù)據(jù)（裝飾器）。組件的元數(shù)據(jù)告訴 Angular 在哪里可以找到創(chuàng)建和呈現(xiàn)其視圖所需的構(gòu)建塊。
Angular 模板是用 HTML 編寫的，但也可以包含帶有特殊指令的Angular 模板語法，以輸出反應(yīng)性數(shù)據(jù)和呈現(xiàn)多個元素等。
組件使用 Angular 中的服務(wù)來委托業(yè)務(wù)邏輯任務(wù)，例如獲取數(shù)據(jù)或驗證輸入。它們是 Angular 應(yīng)用程序的獨特部分。雖然 Angular 不強制使用它們，但強烈建議將應(yīng)用程序構(gòu)建為一組可以重用的不同服務(wù)。
Angular 內(nèi)置于 TypeScript 中，因此建議使用它以獲得最無縫的體驗，但也支持純 JavaScript。
人氣
React
React 是最受歡迎的 JavaScript 項目之一，在 GitHub 上擁有 16 萬顆星。它由 Facebook 開發(fā)和維護(hù)，并在他們的許多項目內(nèi)部使用。此外，根據(jù)BuiltWith的使用統(tǒng)計數(shù)據(jù)，它為超過 200 萬個網(wǎng)站提供支持。
Vue
在三個框架中，Vue在 GitHub上的 star 數(shù)最多，有 176k。該項目由前 google 員工 Evan You 開發(fā)和領(lǐng)導(dǎo)。據(jù)BuiltWith 稱，這是開源社區(qū)中一個非常強大的獨立項目，被超過 100 萬個網(wǎng)站使用。
Angular
Angular 是由 Google 開發(fā)的，但令人驚訝的是它并沒有用于他們的一些旗艦產(chǎn)品，例如搜索或 Youtube。它經(jīng)常用于企業(yè)項目，并基于BuiltWith的數(shù)據(jù)為超過 97,000 個網(wǎng)站提供支持。
它是三個框架中星數(shù)最少的，在 GitHub 上有 68k 星。然而，當(dāng)從 Angular 1 切換到 Angular 2 時，他們創(chuàng)建了一個全新的代碼庫，而不是繼續(xù)AngularJS項目，該項目也有 59k 星。
生態(tài)系統(tǒng)
在開發(fā)應(yīng)用程序時，開源包可以為您節(jié)省寶貴的時間。不僅如此，它們通常比定制組件和封裝更好，因為它們經(jīng)過了實戰(zhàn)測試。
查看可幫助您更輕松地創(chuàng)建新功能的現(xiàn)成組件、主題和其他工具的可用性非常重要。
React
許多前端應(yīng)用程序依賴全局狀態(tài)管理來存儲信息，例如誰登錄和其他用戶設(shè)置。
最流行的 JavaScript 狀態(tài)管理項目是Redux。大多數(shù)開發(fā)人員使用Redux的官方 React 綁定，這些綁定由 Redux 團(tuán)隊維護(hù)。
由于 React 的流行，查找輸入組件和現(xiàn)成的元素非常容易。它們都只是在 Google 或 GitHub 上搜索即可。
React 生態(tài)系統(tǒng)還包括React Native，它允許您從用 React 編寫的單個代碼庫構(gòu)建原生 IOS 和 Android 應(yīng)用程序。因此，React 也可以成為使用 Web 技術(shù)構(gòu)建移動應(yīng)用程序的絕佳選擇。
React 是 MERN 堆棧的一部分，其中包含 MongoDB、ExpressJS、React 和 NodeJS。這種組合的偉大之處在于，單一語言——JavaScript——為整個應(yīng)用程序提供動力。
Vue
盡管 Redux 可以在 Vue 中使用，但沒有官方綁定。但這不應(yīng)該讓您擔(dān)心，因為Vuex是專門為 Vue 應(yīng)用程序制作的官方狀態(tài)管理庫。除了與 Vue 很好地集成之外，使用 Vue 的開發(fā)人員工具進(jìn)行調(diào)試也很容易。
在 Vue 的早期，很難找到現(xiàn)成的組件。隨著社區(qū)的發(fā)展，您可以使用各種輸入組件和高級元素來加快開發(fā)速度。
對于移動應(yīng)用程序開發(fā)，有一個名為Weex 的新興項目。Weex 由阿里巴巴開發(fā)和使用，但不如 React Native 成熟和強大。更重要的是，由于該項目在中國開發(fā)和使用較多，因此很難找到英文文檔和解決問題的方法。
Vue 與 Laravel 集成得很好，這就是為什么它們經(jīng)常一起使用。Laravel 提供完整的JavaScript 和 CSS 腳手架，以支持在新項目中使用 Vue。
Angular
對于 Angular 中的狀態(tài)管理，您可以使用NgRx項目。它的靈感來自 Redux，但它是專門為 Angular 創(chuàng)建的。
與 Vue 和 React 的情況一樣，您可以將許多現(xiàn)成的組件導(dǎo)入到您的項目中。與 Angular 略有不同的是，Angular Material項目中有許多官方組件。這是 Google 的一個官方項目，為 Angular 應(yīng)用程序提供 Material Design 組件。
您可以使用NativeScript在 Angular 中構(gòu)建跨平臺移動應(yīng)用程序。它也支持 Vue，但 Angular 支持更成熟。
Angular 是著名的 MEAN 堆棧的一部分，它將 Angular 與 MongoDB、ExpressJS 和 NodeJS 相結(jié)合。與 MERN 堆棧類似，它的前端和后端都完全依賴 JavaScript。
通用技術(shù)
Angular、React 和 Vue 都可用于開發(fā)漸進(jìn)式 Web 應(yīng)用程序，也稱為 PWA。
PWA 不是移動應(yīng)用程序，而是 Web 應(yīng)用程序，智能手機用戶可以將其添加為主屏幕的快捷方式，并提供類似于原生移動應(yīng)用程序的外觀和感覺。
您還可以為每個框架找到高級模板和預(yù)制應(yīng)用程序，但 Angular 和 React 比 Vue 提供更多高級選項。
性能
在選擇框架或庫時，您還需要考慮性能。
在許多情況下，您不必?fù)?dān)心性能，尤其是在構(gòu)建小型項目時。然而，項目的范圍和復(fù)雜性越大，性能就會（并且將會）成為一個問題。
重要的是要注意，在 Web 性能方面，開發(fā)質(zhì)量和遵循最佳實踐比框架的選擇更重要。
但由于存在一些性能指標(biāo)和差異，我將研究它們并解釋每個指標(biāo)如何影響您的開發(fā)工作。
JS 框架基準(zhǔn)：Angular vs React vs Vue
JS 框架基準(zhǔn)測試的結(jié)果表明，它們在大多數(shù)基準(zhǔn)測試中都表現(xiàn)得相當(dāng)好，例如在表中創(chuàng)建或附加行。
正如你在上面看到的，Vue 在選擇行時比 Angular 和 React 慢得多。另一方面，Angular 和 React 在交換行方面效率不高。
這些是渲染基準(zhǔn)中唯一的實質(zhì)性差異 - 在大多數(shù)情況下，不會產(chǎn)生明顯的結(jié)果。由于選擇行是比交換行更常見的功能，我想說這個基準(zhǔn)測試將 Vue 排在第三位，僅次于 Angular 和 React 并列第一。
在內(nèi)存和啟動時間方面，React 和 Vue 得分很好，但 Angular 稍慢。Angular 啟動一個基本腳本可能需要 150 毫秒，并且需要更多內(nèi)存才能運行。
Perf Track：Angular vs React vs Vue
谷歌 Chrome 實驗室的Perf Track顯示了來自數(shù)千個網(wǎng)站的生產(chǎn)數(shù)據(jù)。這些統(tǒng)計數(shù)據(jù)受許多其他因素的影響，而不僅僅是選擇的框架，讓我們看看數(shù)字。
第一次內(nèi)容繪制
與 Angular 相比，Vue 和 React 網(wǎng)站在這個指標(biāo)上的排名更高，Angular 需要更多時間來啟動并向用戶呈現(xiàn)內(nèi)容。
最大的內(nèi)容繪制
在渲染完整頁面的三個框架中，Angular 也是最慢的，只有 27% 的 Angular 網(wǎng)站得分在可接受的范圍內(nèi)。
首次輸入延遲
對于所有三個框架，超過 80% 的網(wǎng)站都在第一次輸入延遲的可接受范圍內(nèi)，這顯示了用戶可以與頁面交互所需的時間。
JavaScript 字節(jié)
迄今為止，最輕量級的應(yīng)用程序是使用 Vue 開發(fā)的應(yīng)用程序，68% 的 Vue 應(yīng)用程序加載的 JavaScript 不到 1MB。另一方面，Angular 和 React 應(yīng)用程序往往具有更大的代碼大小。
如何使用這些指標(biāo)
您可以從這些數(shù)字中看到趨勢，但您不應(yīng)該太快得出結(jié)論。例如，對于最后一張圖，可以解釋為 Vue 用于開發(fā)更輕量級的應(yīng)用程序，而 Angular 用于更大的項目。
統(tǒng)計數(shù)據(jù)可以幫助指導(dǎo)您做出正確的決定，但您不能使用它們來證明一個框架比另一個更快或更好。
高級功能
對于更高級的應(yīng)用程序，使用的前端框架應(yīng)該能夠執(zhí)行一些提高性能并且可以更好地擴(kuò)展的任務(wù)。
兩項關(guān)鍵技術(shù)是服務(wù)器端渲染 (SSR) 和虛擬化。
Angular
React 支持使用官方ReactDOMServer包進(jìn)行服務(wù)器端渲染。對于虛擬化，您可以使用名為React Virtualized的流行第三方工具。
Vue
Vue 中也支持服務(wù)器端渲染以及官方的SSR 包。此外，您還可以使用基于 Vue 構(gòu)建并支持 SSR的Nuxt.js框架。
不幸的是，Vue 中的虛擬化選項并不是那么強大。在我看來，Vue Virtual Scroll List是虛擬滾動的最佳解決方案，但它有點問題，不如 React 和 Angular 的選項穩(wěn)定。
Angular
Angular 擁有SSR的官方Angular Universal包，以及用于虛擬滾動和高效渲染大型列表的官方組件。
學(xué)習(xí)曲線
學(xué)習(xí)這些框架有多容易？
要回答這個問題，我們需要查看每個框架的復(fù)雜性及其引入的概念。
React
在最基本的用例中，React 是三個框架中最不復(fù)雜的。那是因為你只需要導(dǎo)入庫，然后你就可以用幾行代碼開始編寫你的 React 應(yīng)用程序。
但是除了 Hello World 示例之外，大多數(shù) React 應(yīng)用程序都是基于組件的，而不僅僅是在頁面上呈現(xiàn)一些元素。
一些開發(fā)人員對 React 感到奇怪或困難的一件事是，學(xué)習(xí) JSX 是一條單行道。您也可以使用原始 JavaScript，但由于大多數(shù) React 開發(fā)人員使用 JSX，學(xué)習(xí)它幾乎是不可避免的。
這是使 React 的學(xué)習(xí)曲線變得更陡峭的主要因素，但除此之外，對于了解 JavaScript 并理解 Web 開發(fā)概念的開發(fā)人員來說，它是一個易于學(xué)習(xí)的庫。
Vue
Vue 的設(shè)置比 React 稍微復(fù)雜一些。你可以將它用作一個庫來定義你可以在整個 HTML 中使用的組件——但與 React 類似，這不是大多數(shù)項目的構(gòu)建方式。
大多數(shù) Vue 項目都有一個命名的根組件App.vue和一些用于顯示各種內(nèi)容的子組件。
說到語法，你唯一需要學(xué)習(xí)的新東西就是 Vue 的模板語法，如果你了解 HTML，這很容易掌握。基本的指令，如v-if和v-for有條件的渲染和列表的渲染，很容易理解即使是初學(xué)者。
此外，Vue 的單文件組件將所有前端代碼保存在一個地方，便于組織新項目。
在我看來，Vue 是最容易學(xué)習(xí)的，因為它的簡單和直觀的語法。
Angular
Angular 擁有三者中最復(fù)雜的項目結(jié)構(gòu)，而且由于它是一個成熟的前端框架，因此它依賴的概念更多。
除了組件，Angular 還支持模塊和服務(wù)。它希望您以特定的方式編寫和設(shè)計代碼庫，從而使您的項目在擴(kuò)展時更易于維護(hù)。
至于語法，由于 Angular 最適合與 TypeScript 配合使用，因此在構(gòu)建 Angular 項目時了解 TypeScript 非常重要。
與 Vue 一樣，您還必須熟悉類似 HTML 的語法，以便您可以開始使用 Angular 編寫新的 UI 功能。
在我看來，Angular 對于普通開發(fā)者來說是最難學(xué)的，因為它更復(fù)雜并且依賴于 TypeScript。
未來預(yù)測
許多開源項目和框架逐漸被遺忘并無人維護(hù)。您是否應(yīng)該擔(dān)心我們在這里討論的任何框架？
盡管我們無法完全預(yù)測會發(fā)生什么，但正在進(jìn)行的開發(fā)工作是這些項目健康狀況的良好指標(biāo)。人氣和增長也是預(yù)測項目壽命的重要指標(biāo)，所以讓我們來看看每個框架。
React
React v17.0已經(jīng)發(fā)布，但令人驚訝的是，它沒有為開發(fā)人員提供任何新功能。
主要的變化是這個新版本可以更容易地升級 React 本身。您可以將 React 的某些部分從舊版本升級到新版本，而無需升級整個項目。
如果您的應(yīng)用程序依賴于隨新版本更改或棄用的功能，您可以保留舊版本以保持此功能有效。此更新使 React 成為一個很好的長期選擇，因為它可以更輕松地與新版本保持同步。
React 的每周 npm 下載量自去年以來增長了 44% 。從絕對數(shù)量來看，它仍然是三個項目中下載量最大的。
Vue
Vue 3 已于2020 年 9 月發(fā)布，它解決了 Vue 2 在大型項目中存在的許多嚴(yán)重問題。它引入了受React Hooks啟發(fā)的Composition API，可以更輕松地跨組件重用邏輯。
整個項目用 TypeScript 重寫，提高了新 Vue 項目對 TypeScript 的支持，同時也使項目更易于維護(hù)。
Vue 3 是一個急需的升級，使 Vue 更適合大型項目。
Vue 的每周下載量自去年以來增長了 87%，使 Vue 成為相對而言增長最快的框架。如果 Vue 能夠保持這種增長速度，那么它肯定會很快超過 Angular。
Angular
Angular 最近推出了Ivy 編譯器。它減少了構(gòu)建時間，優(yōu)化了資產(chǎn)，允許更快的測試，并總體上改善了開發(fā)人員的體驗。
Angular 團(tuán)隊每年發(fā)布兩次重大更新，其中可能包含新功能，或者只是讓框架跟上新瀏覽器版本的速度。
自去年以來，Angular 的每周下載量增長了約 50% ，因此它仍然是一個受歡迎的項目。
結(jié)論
Angular、React 和 Vue 都處于非常活躍的開發(fā)階段。他們定期發(fā)布新版本并維護(hù)現(xiàn)有版本。由于在每種情況下當(dāng)前的支持水平都很高，因此您可以安全地使用這些框架中的任何一個。
需要注意的是，Angular 的增長沒有以前那么快，而 Vue——??盡管它是最近開始的——似乎增長了很多。
如前所述，我們無法預(yù)測哪些框架會長期保持相關(guān)性，但每個項目背后都有一個偉大的社區(qū)，并且在不斷發(fā)展。
我這篇文章的目標(biāo)是解釋架構(gòu)差異，分解每個框架的優(yōu)點和缺點，并在適用的地方進(jìn)行比較。
在進(jìn)入一個新框架之前，有幾件事情需要考慮。
首先，在選擇新技術(shù)時，您團(tuán)隊的經(jīng)驗可能是一個決定性因素。
同樣，您必須考慮您所在地區(qū)可用的人才，以便您可以為您的項目聘請開發(fā)人員。
最后，當(dāng)涉及到項目本身時，復(fù)雜性和范圍也會影響您對框架的選擇。
通過考慮所有關(guān)鍵差異，我希望您可以決定哪個是最適合您的目標(biāo)和需求的前端框架。
(本文由聞數(shù)起舞翻譯自Aris Pattakos的文章《Angular vs React vs Vue 2021》，轉(zhuǎn)載請注明出處，原文鏈接：
https://athemes.com/guides/angular-vs-react-vs-vue/)
