Angular vs. React vs. Vue
2021 年 Angular vs. React vs. Vue 前端框架對比 - 知乎 https://zhuanlan.zhihu.com/p/359540593
2021 年 Angular vs. React vs. Vue 前端框架對比
一個是 UI 庫（React），另一個是成熟的前端框架（Angular），而其中最年輕的（Vue）則可以稱之為漸進式框架。
你可能是一個 React 開發者，可能是一個 Vue 開發者，也可能是一個只專注於技術的 Angular 開發者。不過，你還是不能忽視開發社群不斷進行的框架比較。有充分的理由認為：他們三個框架，一個是 UI 庫（React），另一個是成熟的前端框架（Angular），而其中最年輕的（Vue）則可以稱之為漸進式框架。每一個框架都擁有一些獨特的優勢和效能指標。正是這些不可忽略的優勢和指標，我們不能不對這三種框架進行對比分析。
這幾個框架都是基於元件的框架，都有快速建立 UI 的功能。大部分時間，它們可以相互替代來用於構建前端應用。然而它們並非 100% 相同。
這就是為什麼我們決定為你建立一個簡短的指南，但最重要的是，為你提供一個參考幫助你在未來進行技術選擇。
讓我們開始吧！
許可證
當然，在使用一個開源框架或庫之前，一定要徹底檢查許可證。幸運的是，React、Angular 和 Vue 都使用MIT 許可證。它提供了有限的複用限制，而且我們甚至還可以在專有軟體中使用。在使用任何框架或軟體之前，一定要留心，注意瞭解許可證的內容。
架構設計
Angular
Angular 框架屬於 MEAN 框架，是如今創業公司最熱門的技術棧。Angular 是一個完整的基於 TypeScript 的 Web 應用開發框架，主要用於構建單頁 Web 應用（SPA）。
與 AngularJS 這一早期的框架不同，Angular2 是基於元件的，與 MV* 模式沒有什麼關聯。Angular 的結構方式包括模組、元件和服務。
在 Angular 框架中，每個元件都有一個類或模板，定義了應用邏輯和 MetaData（裝飾器）。元件的這些元資料為建立和呈現其檢視所需的構件在哪裡提供了指引。
Angular 架構的另一個重要因素是，模板是用 HTML 編寫的。它們還可以包含 Angular 模板語法，並帶有特殊指令以輸出響應式資料，並且可以渲染多個元素。
服務 —— Angular 應用中的一個獨特元素，被 Components 用於委託業務邏輯任務，如獲取資料或驗證輸入。雖然使用服務並沒有嚴格執行，但是將應用程式結構作為一組可複用的不同服務則是比較明智的。
React
React 是一個開源的前端庫，主要用於開發使用者介面。這種靈活的前端解決方案並不強制執行特定的專案結構。一個 React 開發者可能只需要幾行程式碼就可以開始使用它。
React 是基於 JavaScript 的，但在大多數情況下，它與 JSX（JavaScript XML）相結合。JSX 是一種語法擴充套件，允許開發人員同時建立包含 HTML 和 JavaScript 的元素。實際上，開發者可以用 JSX 建立的任何東西也可以用React JavaScript API建立。React 元素比 DOM 元素更強大，它們是 React 應用的最小組成部分，即元件。
React 元件是一種構建模組，它決定了在整個 Web 應用中使用獨立和可重用的元件。
Vue
用於開發使用者介面和單頁 Web 應用，Vue 是一個開源的Model-View-View-Model(MVVM) 前端 JavaScript 庫。它被稱為漸進式框架，與其它工具一起被用於前端開發。Vue 的多用途、高效能和它在 Web 應用程式上的最佳使用者體驗成就了它的流行。
使用 Vue 時，開發者主要在 ViewModel 層上工作，以確保應用資料的處理方式能讓框架呈現最新的檢視。
Vue 的模板語法將可識別的 HTML 與特殊的指令和功能相結合。該語法允許開發人員建立 View 元件。
現在 Vue 中的元件是小巧、自成一體和可複用的。單檔案元件（SFC）使用副檔名.vue，包含 HTML、JavaScript 和 CSS，因此所有相關程式碼都存放在同一個檔案中。
在大型的 Vue.js 專案中，我們通常推薦使用 SFC 來組織程式碼。要將 SFC 移植到工作的 JavaScript 程式碼中，你需要 Webpack 或 Browserify 這樣的構建工具。
適用目標和範圍
Angular
Angular 最適合大型和高階專案。這些可能包括但不限於：
- 用於開發漸進式 Web 應用程式（PWA）。
- 用於重新設計網站應用程式。
- 用於建立基於內容的動態網頁設計。
- 用於建立有著複雜基礎架構的大型企業應用程式。
React
React 來自 MERN 架構，一種以構建複雜的業務應用程式而聞名的技術架構。當將它與 Redux、MobX 或其它 flux 模式的狀態管理庫一起使用時，React 就能夠成為強大的工具。React 最適合以下專案：
- 對於涉及包含導航項，摺疊或展開的手風琴分節，可用或不可用狀態，動態輸入，可用或不可用按鈕，使用者登入，使用者訪問許可權等的許多元件的應用程式。
- 對於具有擴充套件和增長可能的專案，因為 React 元件具有宣告性，因此它可以輕鬆處理此類複雜結構。
- 當 UI 是網路應用程式的中心時。
Vue
因為 Vue 具有可接受且快速的學習曲線，Vue 最適合解決短期的小型的問題。它可以輕鬆地與現有程式碼塊整合。在以下情況下可能需要 Vue：
- 你需要帶有動畫或互動式元素的 Web 應用程式的開發專案。
- 無需高階技能即可進行原型製作。
- 需要與多個其他應用程式無縫整合的應用程式。
- 更早推出 MVP。
效能和開發
Angular
Angular 效能方面的一些亮點包括：
- 有無縫的第三方整合，以增強產品或應用程式的功能。
- 提供強大的元件集合，從而簡化了編寫，更改和使用程式碼的過程。
- 它的“提前編譯器”賦予了應用程式更快的載入時間和安全性。
- MVC 模型通過允許檢視分離來幫助減少後臺查詢。
- 促進使用將依賴項注入的外部元素來讓元件解耦，從而為可複用性以及簡化管理和測試鋪平了道路。
- 通過將任務分成邏輯塊來減少網頁的初始載入時間。
- 可以完全自定義的設計。
- 便於將 HTML 和 TypeScript 編譯為 JavaScript —— 大大加快了程式碼的編譯速度，並將編譯提早到遠早於瀏覽器開始載入 Web 應用程式之前。
React
在效能方面 React 與 Vue 不相上下，因為兩者具有相同的架構，即與 DOM 的互動。React 開發 Web 的效能可以評估如下：
- 支援打包和 tree-shaking —— 這對於減少終端使用者的資源負載至關重要。
- 由於提供了單向資料繫結支援，因此可以更好地控制專案。
- 便於進行測試和監控管理。
- 最適合需要頻繁更改的複雜應用程式。
Vue
最貼切的形容 Vue 的片語是“令人難以置信的快速”。它的一些效能指標是：
- 更快的學習曲線。
- 單頁應用程式高效精密。
- 高階功能使它具有多功能性。
各自的優點
Angular
有對模板、表單、載入程式或架構、元件以及元件之間互動的完整的文件：
- 平滑的雙向資料繫結。
- MVC 架構。
- 內建模組系統。
- 大大減少了網頁的初始載入時間。
使用 Angular 構建的流行應用程式：
Youtube TV | PayPal | Gmail | Forbes | Google Cloud
React
- 通過模組化的結構使其擁有靈活的程式碼，節省時間和成本。
- 助力複雜應用程式的高效能的實現。
- 使用 React 前端開發能夠更容易去做程式碼維護。
- 支援適用於 Android 和 iOS 平臺的移動端原生應用程式。
使用 React 構建的流行應用程式：
Tesla | AirBnB | CNN | Nike | Udemy | Linked-in
Vue
- 它的體積小巧，便於安裝和下載。
- 倘若我們正確利用，我們就可以在多處重用 Vue。
- Vue.js 允許我們更新網頁中的元素，而無需渲染整個 DOM，因為它是虛擬的 DOM。
- 需要較少的優化。
- 加速 Web 應用程式的開發，並允許大佬將模板到虛擬 DOM 與編譯器分開。
- 經過驗證的相容性和靈活性。
- 不管應用程式的規模如何，程式碼庫都不會變。
使用 Vue 構建的流行應用程式：
Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo
社群支援與學習曲線
React JS 庫是由 Facebook 建立的，擁有大量的貢獻者以及一個龐大的開發者社群，為各種問題貢獻他們的解決方案。Angular 也有一個龐大的開發者社群，對最具挑戰性和最怪異的案例都有解決方案。Vue 具有良好的生態系統，並具有 React 和 Angular 框架的所有特性。說到學習曲線，React 無疑是開發者能夠最快學習和適應的，其次是 Vue 和 Angular。
本文總結
從前端開發者的角度來看，React 將是 2021 年最快學會使用的框架，Vue 和 React 都是輕量級、直觀的並且效能完美良好的框架。