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

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

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

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

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

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

一、架構(gòu)設(shè)計

Angular

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

與 AngularJS 這一早期的框架不同，Angular2 是基于組件的，與 MV* 模式?jīng)]有什么關(guān)聯(lián)。Angular 的結(jié)構(gòu)方式包括模塊、組件和服務(wù)。

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

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

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

React

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

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

React 組件是一種構(gòu)建模塊，它決定了在整個 Web 應(yīng)用中使用獨立和可重用的組件。

Vue

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

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

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

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

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

二、適用目標(biāo)和范圍

Angular

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

用于開發(fā)漸進(jìn)式 Web 應(yīng)用程序（PWA）。

用于重新設(shè)計網(wǎng)站應(yīng)用程序。

用于建立基于內(nèi)容的動態(tài)網(wǎng)頁設(shè)計。

用于創(chuàng)建有著復(fù)雜基礎(chǔ)架構(gòu)的大型企業(yè)應(yīng)用程序。

React

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

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

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

當(dāng) UI 是網(wǎng)絡(luò)應(yīng)用程序的中心時。

Vue

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

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

無需高級技能即可進(jìn)行原型制作。

需要與多個其他應(yīng)用程序無縫集成的應(yīng)用程序。

更早推出 MVP。

三、性能和開發(fā)

Angular

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

有無縫的第三方集成，以增強產(chǎn)品或應(yīng)用程序的功能。

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

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

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

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

通過將任務(wù)分成邏輯塊來減少網(wǎng)頁的初始加載時間。

可以完全自定義的設(shè)計。

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

React

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

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

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

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

*適合需要頻繁更改的復(fù)雜應(yīng)用程序。

Vue

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

更快的學(xué)習(xí)曲線。

單頁應(yīng)用程序高效精密。

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

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

Angular

有對模板、表單、引導(dǎo)程序或架構(gòu)、組件以及組件之間交互的完整的文檔：

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

MVC 架構(gòu)。

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

大大減少了網(wǎng)頁的初始加載時間。

使用 Angular 構(gòu)建的流行應(yīng)用程序：

Youtube TV | PayPal | Gmail | Forbes | Google Cloud

React

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

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

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

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

使用 React 構(gòu)建的流行應(yīng)用程序：

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

Vue

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

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

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

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

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

經(jīng)過驗證的兼容性和靈活性。

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

使用 Vue 構(gòu)建的流行應(yīng)用程序：

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

五、社區(qū)支持與學(xué)習(xí)曲線

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

本文總結(jié)

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

*文章內(nèi)容和圖片均來源于網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系刪除。