Angular vs React vs Vue 2022

每個前端開發人員都聽說過三個用於構建 Web 應用程序的框架：React、Vue.js 和 Angular。

React 是一個 UI 庫，Angular 是一個成熟的前端框架，而 Vue.js 是一個漸進式框架。

它們幾乎可以互換使用來構建前端應用程序，但它們並不是 100% 相同，因此比較它們並了解它們的差異是有意義的。

每個框架都是基於組件的，並允許快速創建 UI 功能。

然而，它們都有不同的結構和架構——所以首先，我們將研究它們的架構差異以了解它們背後的理念。

建築學

反應

React 不強制執行特定的項目結構，正如您從下面的官方“Hello World”示例中看到的那樣，您只需幾行代碼即可開始使用 React。

 ReactDOM.render(
  <h1>你好，世界！</h1>,
  document.getElementById('root')
);

React 可以用作 UI 庫來呈現元素，而無需強制執行特定的項目結構，這就是為什麼它不是嚴格意義上的框架。

React Elements 是 React 應用程序的最小構建塊。 它們比 DOM 元素更強大，因為 React DOM 確保在發生變化時有效地更新它們。

組件是更大的構建塊，它定義了要在整個應用程序中使用的獨立且可重用的部分。 它們接受稱為 props 的輸入並生成元素，然後顯示給用戶。

React 基於 JavaScript，但它主要與 JSX (JavaScript XML) 結合使用，這是一種語法擴展，允許您創建同時包含 HTML 和 JavaScript 的元素。

您使用 JSX 創建的任何內容也可以使用 React JavaScript API 創建，但大多數開發人員更喜歡 JSX，因為它更直觀。

Vue

Vue.js 核心庫只關注 View 層。 它之所以稱為漸進式框架，是因為您可以使用官方和第三方包（例如 Vue Router 或 Vuex）擴展其功能，將其轉變為實際框架。

儘管 Vue 與 MVVM（Model-View-ViewModel）模式沒有嚴格關聯，但它的設計部分受到了它的啟發。 使用 Vue，您將主要在 ViewModel 層上工作，以確保以允許框架呈現最新視圖的方式處理應用程序數據。

Vue 的模板語法讓你可以創建 View 組件，它結合了熟悉的 HTML 和特殊的指令和特性。 儘管也支持原始 JavaScript 和 JSX，但這種模板語法是首選。

Vue 中的組件很小，自包含，可以在整個應用程序中重用。 具有.vue擴展名的單個文件組件 (SFC) 包含 HTML、CSS 和 JavaScript，因此所有相關代碼都駐留在一個文件中。

SFC 是在 Vue.js 項目中組織代碼的推薦方式，尤其是大型項目。 需要 Webpack 或 Browserify 等工具將 SFC 轉換為工作 JavaScript 代碼。

角

在本文中，我討論的是 Angular 2，而不是現在稱為 AngularJS 的框架的第一個版本。

AngularJS，最初的框架，是一個 MVC (Model-View-Controller)) 框架。 但在 Angular 2 中，與 MV* 模式沒有嚴格的關聯，因為它也是基於組件的。

Angular 中的項目被結構化為模塊、組件和服務。 每個 Angular 應用程序至少有一個根組件和一個根模塊。

Angular 中的每個組件都包含一個模板、一個定義應用程序邏輯的類和元數據（裝飾器）。 組件的元數據告訴 Angular 在哪裡可以找到它需要創建和呈現其視圖的構建塊。

Angular 模板是用 HTML 編寫的，但也可以包含帶有特殊指令的 Angular 模板語法，以輸出反應數據和渲染多個元素等。

組件使用 Angular 中的服務來委派業務邏輯任務，例如獲取數據或驗證輸入。 它們是 Angular 應用程序的一個獨特部分。 雖然 Angular 不強制使用它們，但強烈建議將應用程序構建為一組可以重用的不同服務。

Angular 是在 TypeScript 中構建的，因此建議使用它以獲得最無縫的體驗，但也支持純 JavaScript。

人氣

反應

React 是最受歡迎的 JavaScript 項目之一，在 GitHub 上擁有 160k 星。 它由 Facebook 開發和維護，並在他們的許多項目內部使用。 此外，根據 BuiltWith 的使用統計數據，它為超過 200 萬個網站提供支持。

Vue

在這三個框架中，Vue 在 GitHub 上的星星最多，有 17.6 萬顆星星。 該項目由前 Google 員工 Evan You 開發和領導。 根據 BuiltWith 的說法，它是開源社區中一個非常強大的獨立項目，被超過 100 萬個網站使用。

角

Angular 是由 Google 開發的，但令人驚訝的是，它並沒有用於他們的一些旗艦產品，例如 Search 或 Youtube。 它經常用於企業項目，並根據 BuiltWith 的數據為超過 97,000 個網站提供支持。

它是三個框架中星數最少的，在 GitHub 上有 68k 星。 然而，當從 Angular 1 切換到 Angular 2 時，他們創建了一個全新的存儲庫，而不是繼續 AngularJS 項目，該項目也有 59k 星。

生態系統

開源軟件包可以為您節省開發應用程序的寶貴時間。 不僅如此，它們通常比定制的組件和包更好，因為它們經過了實戰測試。

了解可幫助您更輕鬆地創建新功能的現成組件、主題和其他工具的可用性非常重要。

反應

許多前端應用程序依賴全局狀態管理來存儲信息，例如誰登錄和其他用戶設置。

最受歡迎的 JavaScript 狀態管理項目是 Redux。 大多數開發人員使用 Redux 的官方 React 綁定，由 Redux 團隊維護。

由於 React 的流行，查找輸入組件和即用型元素非常容易。 它們都只是谷歌或 GitHub 搜索。

React 生態系統還包括 React Native，它允許您從用 React 編寫的單個代碼庫構建原生 iOS 和 Android 應用程序。 因此，React 也可以成為使用 Web 技術構建移動應用程序的絕佳選擇。

React 是 MERN 堆棧的一部分，其中包含 MongoDB、ExpressJS、React 和 NodeJS。 這種組合的好處在於單一語言——JavaScript——為整個應用程序提供動力。

Vue

儘管 Redux 可以在 Vue 中使用，但沒有官方綁定。 但這不應該讓您擔心，因為 Vuex 是專門為 Vue 應用程序製作的官方狀態管理庫。 除了與 Vue 很好地集成之外，使用 Vue 的開發人員工具也很容易調試。

在 Vue 的早期，很難找到現成的組件。 隨著社區的發展，您可以使用各種輸入組件和高級元素來加快開發速度。

對於移動應用程序開發，有一個名為 Weex 的新興項目。 Weex 是阿里巴巴開發和使用的，但沒有 React Native 成熟和強大。 更重要的是，由於該項目在中國的開發和使用較多，因此很難找到英文文檔和問題解決方案。

Vue 與 Laravel 集成得很好，這就是為什麼它們經常一起使用。 Laravel 提供了完整的 JavaScript 和 CSS 腳手架，以支持在新項目中使用 Vue。

角

對於 Angular 中的狀態管理，您可以使用 NgRx 項目。 它受到 Redux 的啟發，但它是專門為 Angular 創建的。

與 Vue 和 React 一樣，您可以將許多現成的組件導入到您的項目中。 與 Angular 稍有不同的是，Angular Material 項目中有很多官方組件。 這是 Google 的一個官方項目，為 Angular 應用程序提供 Material Design 組件。

您可以使用 NativeScript 在 Angular 中構建跨平台的移動應用程序。 它也支持 Vue，但對 Angular 的支持更成熟。

Angular 是著名的 MEAN 堆棧的一部分，它將 Angular 與 MongoDB、ExpressJS 和 NodeJS 結合在一起。 與 MERN 堆棧類似，它的前端和後端都完全依賴於 JavaScript。

通用技術

Angular、React 和 Vue 都可以用於開發漸進式 Web 應用程序，也稱為 PWA。

PWA 不是移動應用程序，而是智能手機用戶可以將其作為快捷方式添加到其主屏幕的 Web 應用程序，並提供類似於原生移動應用程序的外觀和感覺。

您還可以為每個框架找到高級模板和預製應用程序，但 Angular 和 React 比 Vue 有更多可用的高級選項。

表現

在選擇框架或庫時，您還需要考慮性能。

在許多情況下，您不必擔心性能問題，尤其是在構建小型項目時。 然而，項目的範圍和復雜性越大，性能就會（並且將會）成為一個問題。

重要的是要注意，在 Web 性能方面，開髮質量和遵循最佳實踐比框架的選擇更重要。

但由於存在一些性能指標和差異，我將對其進行研究並解釋每個指標如何影響您的開發工作。

JS 框架基準測試：Angular vs React vs Vue

JS 框架基準測試的結果表明，它們在大多數基準測試中都表現良好，例如在表中創建或追加行。

正如您在上面看到的，Vue 在選擇行時比 Angular 和 React 慢得多。 另一方面，Angular 和 React 在交換行方面效率不高。

這些是渲染基準中唯一的實質性差異——在大多數情況下，不會產生明顯的結果。 由於選擇行是一種比交換行更常見的功能，我想說這個基準將 Vue 置於第三位，僅次於共享最高位置的 Angular 和 React。

在內存和啟動時間方面，React 和 Vue 得分很高，但 Angular 稍慢一些。 Angular 啟動一個基本腳本可能需要 150 毫秒，並且需要更多內存才能運行。

Perf Track：Angular vs React vs Vue

Google Chrome Labs 的 Perf Track 顯示了來自數千個網站的生產數據。 這些統計數據受到許多其他因素的影響，不僅是選擇的框架，讓我們看看數字。

第一次內容豐富的油漆

與 Angular 相比，Vue 和 React 網站在此指標上的排名更高，後者可能需要更多時間來啟動並向用戶呈現內容。

最大的內容塗料

在渲染完整頁面的三個框架中，Angular 也是最慢的，只有 27% 的 Angular 網站得分在可接受的範圍內。

首次輸入延遲

對於所有三個框架，超過 80% 的網站都在第一次輸入延遲的可接受範圍內，這表明用戶可以與頁面交互需要多少時間。

JavaScript 字節

迄今為止，最輕量級的應用程序是使用 Vue 開發的應用程序，68% 的 Vue 應用程序加載的 JavaScript 不到 1MB。 另一方面，Angular 和 React 應用程序往往具有更大的代碼量。

如何使用這些指標

你可以從這些數字中看到一個趨勢，但你不應該太快下結論。 例如，對於最後一個圖，一個解釋可能是 Vue 用於開發更輕量級的應用程序，而 Angular 用於更大的項目。

統計數據可以幫助指導您做出正確的決定，但您不能使用它們來證明一個框架比另一個框架更快或更好。

高級功能

對於更高級的應用程序，使用中的前端框架應該能夠執行一些提高性能並且可以更好地擴展的任務。

兩項關鍵技術是服務器端渲染 (SSR) 和虛擬化。

反應

React 通過官方的 ReactDOMServer 包支持服務器端渲染。 對於虛擬化，您可以使用一個流行的第三方工具，稱為 React Virtualized。

Vue

Vue 以及官方 SSR 包也支持服務器端渲染。 此外，您還可以使用構建在 Vue 之上並支持 SSR 的 Nuxt.js 框架。

不幸的是，Vue 中的虛擬化選項並不那麼強大。 在我看來，Vue Virtual Scroll List 是虛擬滾動的最佳解決方案，但它有點 bug 並且不如 React 和 Angular 的選項穩定。

角

Angular 有官方的 SSR Angular Universal 包，以及用於虛擬滾動和高效渲染大型列表的官方組件。

學習曲線

學習這些框架有多容易？

要回答這個問題，我們需要查看每個框架的複雜性以及它們引入的概念。

反應

在其最基本的用例中，React 是三個框架中最簡單的。 那是因為你只需要導入庫，然後你就可以開始用幾行代碼編寫你的 React 應用程序。

但除了 Hello World 示例之外，大多數 React 應用程序都是基於組件的，並且不只是在頁面上呈現一些元素。

一些開發人員對 React 感到奇怪或困難的一件事是，學習 JSX 是一條單行道。 您也可以使用原始 JavaScript，但由於大多數 React 開發人員使用 JSX，因此學習它幾乎是不可避免的。

這是使 React 的學習曲線更陡峭的主要因素，但除此之外，對於了解 JavaScript 和了解 Web 開發概念的開發人員來說，它還是一個易於學習的庫。

Vue

Vue 的設置比 React 複雜一些。 您可以將它用作庫來定義可以在整個 HTML 中使用的組件——但與 React 類似，這不是大多數項目的構建方式。

大多數 Vue 項目都會有一個名為App.vue的根組件和許多用於顯示各種內容的子組件。

說到語法，唯一要學的新東西就是 Vue 的模板語法，如果你懂 HTML，就很容易掌握。 用於條件渲染和列表渲染的v-if和v-for等基本指令即使對於初學者來說也很容易理解。

此外，Vue 的單文件組件將所有前端代碼保存在一個地方，便於組織新項目。

在我看來，Vue 是最容易學習的，因為它的簡單性和直觀的語法。

角

Angular 是三者中最複雜的項目結構，而且由於它是一個成熟的前端框架，它依賴於更多的概念。

除了組件，Angular 還支持模塊和服務。 它希望您以特定方式編寫和設計代碼庫，使您的項目在擴展時更易於維護。

至於語法，由於 Angular 最適合使用 TypeScript，因此在構建 Angular 項目時了解 TypeScript 很重要。

與 Vue 一樣，您還必須熟悉類似 HTML 的語法，以便您可以開始使用 Angular 編寫新的 UI 功能。

在我看來，對於普通開發人員來說，Angular 是最難學習的，因為它更複雜並且依賴於 TypeScript。

未來預測

許多開源項目和框架逐漸被遺忘，變得無人維護。 您是否應該擔心我們在這裡討論的任何框架？

儘管我們無法完全預測會發生什麼，但正在進行的開發工作是這些項目健康狀況的良好指標。 人氣和增長也是預測項目壽命的重要指標，所以讓我們來看看每個框架。

反應

React v17.0 已經發布，但令人驚訝的是，它沒有為開發人員提供任何新功能。

主要的變化是這個新版本更容易升級 React 本身。 您可以將 React 的某些部分從舊版本升級到新版本，而無需升級整個項目。

如果您的應用程序依賴於新版本更改或棄用的功能，您可以保留舊版本以保持此功能有效。 此更新使 React 成為一個不錯的長期選擇，因為它可以更輕鬆地與新版本保持同步。

自去年以來，React 的每週 npm 下載量增長了 44%。 從絕對數字來看，它仍然是三個項目中下載次數最多的。

Vue

Vue 3 已於 2020 年 9 月發布，它解決了 Vue 2 在大型項目中存在的許多嚴重問題。 它引入了受 React Hooks 啟發的 Composition API，使跨組件重用邏輯變得更加容易。

整個項目用 TypeScript 重寫，在新的 Vue 項目中改進了對 TypeScript 的支持，同時也使項目更易於維護。

Vue 3 是一個急需的升級，使 Vue 更適合大型項目。

自去年以來，Vue 的每週下載量增長了 87%，使 Vue 成為相對而言增長最快的框架。 如果 Vue 能夠保持這樣的增長速度，那麼它肯定會很快超越 Angular。

角

Angular 最近推出了 Ivy 編譯器。 它減少了構建時間，優化了資產，允許更快的測試，並總體上改善了開發人員的體驗。

Angular 團隊每年兩次發布重大更新，其中可能包含新功能或只是使框架與新的瀏覽器版本同步。

自去年以來，Angular 的每週下載量增長了約 50%，因此它仍然是一個受歡迎的項目。

結論

Angular、React 和 Vue 都在非常活躍的開發中。 他們定期發布新版本並維護現有版本。 由於每種情況下當前的支持級別都很高，因此您可以安全地使用這些框架中的任何一個。

值得注意的是，Angular 的增長速度沒有以前那麼快，而 Vue——​​即使它最近才開始——似乎增長了很多。

如前所述，我們無法預測哪些框架會長期保持相關性，但每個項目背後都有一個很棒的社區，並且在不斷發展。

我寫這篇文章的目的是解釋架構差異，分解每個框架的優勢和劣勢，並在適用的地方進行比較。

在進入一個新框架之前，有幾件事情需要考慮。

首先，您團隊的經驗可能是選擇新技術時的決定性因素。

同樣，您必須考慮您所在地區可用的人才，以便您可以為您的項目聘請開發人員。

最後，當涉及到項目本身時，複雜性和範圍也會影響您對框架的選擇。

通過考慮所有關鍵差異，我希望您可以決定哪個是最適合您的目標和需求的前端框架。