angular，react，Vue前端框架對比全解

一個是 UI 庫（React），另一個是成熟的前端框架（Angular），而其中*年輕的（Vue）則可以稱之為漸進式框架。

你可能是一個 React 開發(fā)者，可能是一個 Vue 開發(fā)者，也可能是一個只專注于技術的 Angular 開發(fā)者。不過，你還是不能忽視開發(fā)社區(qū)不斷進行的框架比較。有充分的理由認為：他們三個框架，一個是 UI 庫（React），另一個是成熟的前端框架（Angular），而其中*年輕的（Vue）則可以稱之為漸進式框架。每一個框架都擁有一些獨特的優(yōu)勢和性能指標。正是這些不可忽略的優(yōu)勢和指標，我們不能不對這三種框架進行對比分析。

這幾個框架都是基于組件的框架，都有快速創(chuàng)建 UI 的功能。大部分時間，它們可以相互替代來用于構建前端應用。然而它們并非 100% 相同。

這就是為什么我們決定為你創(chuàng)建一個簡短的指南，但最重要的是，為你提供一個參考幫助你在未來進行技術選擇。

當然，在使用一個開源框架或庫之前，一定要徹底檢查許可證。幸運的是，React、Angular 和 Vue 都使用 MIT 許可證。它提供了有限的復用限制，而且我們甚至還可以在專有軟件中使用。在使用任何框架或軟件之前，一定要留心，注意了解許可證的內容。

一、架構設計

Angular

Angular 框架屬于 MEAN 框架，是如今創(chuàng)業(yè)公司*熱門的技術棧。Angular 是一個完整的基于 TypeScript 的 Web 應用開發(fā)框架，主要用于構建單頁 Web 應用（SPA）。

與 AngularJS 這一早期的框架不同，Angular2 是基于組件的，與 MV* 模式沒有什么關聯(lián)。Angular 的結構方式包括模塊、組件和服務。

在 Angular 框架中，每個組件都有一個類或模板，定義了應用邏輯和 MetaData（裝飾器）。組件的這些元數(shù)據(jù)為創(chuàng)建和呈現(xiàn)其視圖所需的構件在哪里提供了指引。

Angular 架構的另一個重要因素是，模板是用 HTML 編寫的。它們還可以包含 Angular 模板語法，并帶有特殊指令以輸出響應式數(shù)據(jù)，并且可以渲染多個元素。

服務 —— Angular 應用中的一個獨特元素，被 Components 用于委托業(yè)務邏輯任務，如獲取數(shù)據(jù)或驗證輸入。雖然使用服務并沒有嚴格執(zhí)行，但是將應用程序結構作為一組可復用的不同服務則是比較明智的。

React

React 是一個開源的前端庫，主要用于開發(fā)用戶界面。這種靈活的前端解決方案并不強制執(zhí)行特定的項目結構。一個 React 開發(fā)者可能只需要幾行代碼就可以開始使用它。

React 是基于 JavaScript 的，但在大多數(shù)情況下，它與 JSX（JavaScript XML）相結合。JSX 是一種語法擴展，允許開發(fā)人員同時創(chuàng)建包含 HTML 和 JavaScript 的元素。實際上，開發(fā)者可以用 JSX 創(chuàng)建的任何東西也可以用 React JavaScript API 創(chuàng)建。React 元素比 DOM 元素更強大，它們是 React 應用的最小組成部分，即組件。

React 組件是一種構建模塊，它決定了在整個 Web 應用中使用獨立和可重用的組件。

Vue

用于開發(fā)用戶界面和單頁 Web 應用，Vue 是一個開源的 Model-View-View-Model (MVVM) 前端 JavaScript 庫。它被稱為漸進式框架，與其它工具一起被用于前端開發(fā)。Vue 的多用途、高性能和它在 Web 應用程序上的*佳用戶體驗成就了它的流行。

使用 Vue 時，開發(fā)者主要在 ViewModel 層上工作，以確保應用數(shù)據(jù)的處理方式能讓框架呈現(xiàn)最新的視圖。

Vue 的模板語法將可識別的 HTML 與特殊的指令和功能相結合。該語法允許開發(fā)人員創(chuàng)建 View 組件。

現(xiàn)在 Vue 中的組件是小巧、自成一體和可復用的。單文件組件（SFC）使用擴展名 .vue ，包含 HTML、JavaScript 和 CSS，因此所有相關代碼都存放在同一個文件中。

在大型的 Vue.js 項目中，我們通常推薦使用 SFC 來組織代碼。要將 SFC 移植到工作的 JavaScript 代碼中，你需要 Webpack 或 Browserify 這樣的構建工具。

二、適用目標和范圍

Angular

Angular *適合大型和高級項目。這些可能包括但不限于：

用于開發(fā)漸進式 Web 應用程序（PWA）。

用于重新設計網站應用程序。

用于建立基于內容的動態(tài)網頁設計。

用于創(chuàng)建有著復雜基礎架構的大型企業(yè)應用程序。

React

React 來自 MERN 架構，一種以構建復雜的業(yè)務應用程序而聞名的技術架構。當將它與 Redux、MobX 或其它 flux 模式的狀態(tài)管理庫一起使用時，React 就能夠成為強大的工具。React *適合以下項目：

對于涉及包含導航項，折疊或展開的手風琴分節(jié)，可用或不可用狀態(tài)，動態(tài)輸入，可用或不可用按鈕，用戶登錄，用戶訪問權限等的許多組件的應用程序。

對于具有擴展和增長可能的項目，因為 React 組件具有聲明性，因此它可以輕松處理此類復雜結構。

當 UI 是網絡應用程序的中心時。

Vue

因為 Vue 具有可接受且快速的學習曲線，Vue *適合解決短期的小型的問題。它可以輕松地與現(xiàn)有代碼塊集成。在以下情況下可能需要 Vue：

你需要帶有動畫或交互式元素的 Web 應用程序的開發(fā)項目。

無需高級技能即可進行原型制作。

需要與多個其他應用程序無縫集成的應用程序。

更早推出 MVP。

三、性能和開發(fā)

Angular

Angular 性能方面的一些亮點包括：

有無縫的第三方集成，以增強產品或應用程序的功能。

提供強大的組件集合，從而簡化了編寫，更改和使用代碼的過程。

它的“提前編譯器”賦予了應用程序更快的加載時間和安全性。

MVC 模型通過允許視圖分離來幫助減少后臺查詢。

促進使用將依賴項注入的外部元素來讓組件解耦，從而為可復用性以及簡化管理和測試鋪平了道路。

通過將任務分成邏輯塊來減少網頁的初始加載時間。

可以完全自定義的設計。

便于將 HTML 和 TypeScript 編譯為 JavaScript —— 大大加快了代碼的編譯速度，并將編譯提早到遠早于瀏覽器開始加載 Web 應用程序之前。

React

在性能方面 React 與 Vue 不相上下，因為兩者具有相同的架構，即與 DOM 的交互。React 開發(fā) Web 的性能可以評估如下：

支持打包和 tree-shaking —— 這對于減少最終用戶的資源負載至關重要。

由于提供了單向數(shù)據(jù)綁定支持，因此可以更好地控制項目。

便于進行測試和監(jiān)控管理。

*適合需要頻繁更改的復雜應用程序。

Vue

*貼切的形容 Vue 的詞組是“令人難以置信的快速”。它的一些性能指標是：

更快的學習曲線。

單頁應用程序高效精密。

高級功能使它具有多功能性。

四、各自的優(yōu)點

Angular

有對模板、表單、引導程序或架構、組件以及組件之間交互的完整的文檔：

平滑的雙向數(shù)據(jù)綁定。

MVC 架構。

內置模塊系統(tǒng)。

大大減少了網頁的初始加載時間。

使用 Angular 構建的流行應用程序：

Youtube TV | PayPal | Gmail | Forbes | Google Cloud

React

通過模塊化的結構使其擁有靈活的代碼，節(jié)省時間和成本。

助力復雜應用程序的高性能的實現(xiàn)。

使用 React 前端開發(fā)能夠更容易去做代碼維護。

支持適用于 Android 和 iOS 平臺的移動端原生應用程序。

使用 React 構建的流行應用程序：

Tesla | AirBnB | CNN | Nike | Udemy | Linked-in

Vue

它的體積小巧，便于安裝和下載。

倘若我們正確利用，我們就可以在多處重用 Vue。

Vue.js 允許我們更新網頁中的元素，而無需渲染整個 DOM，因為它是虛擬的 DOM。

需要較少的優(yōu)化。

加速 Web 應用程序的開發(fā)，并允許大佬將模板到虛擬 DOM 與編譯器分開。

經過驗證的兼容性和靈活性。

不管應用程序的規(guī)模如何，代碼庫都不會變。

使用 Vue 構建的流行應用程序：

Gitlab | Spendesk | Behance | 9Gag | Wizzair | Nintendo

五、社區(qū)支持與學習曲線

React JS 庫是由 Facebook 創(chuàng)建的，擁有大量的貢獻者以及一個龐大的開發(fā)者社區(qū)，為各種問題貢獻他們的解決方案。Angular 也有一個龐大的開發(fā)者社區(qū)，對*具挑戰(zhàn)性和*怪異的案例都有解決方案。Vue 具有良好的生態(tài)系統(tǒng)，并具有 React 和 Angular 框架的所有特性。說到學習曲線，React 無疑是開發(fā)者能夠*快學習和適應的，其次是 Vue 和 Angular。

本文總結

從前端開發(fā)者的角度來看，React 將是 2021 年*快學會使用的框架，Vue 和 React 都是輕量級、直觀的并且性能完美良好的框架。

*文章內容和圖片均來源于網絡，如有侵權，請聯(lián)系刪除。