angular，react，Vue前端框架對(duì)比全解

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

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

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

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

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

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

Angular

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

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

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

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

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

React

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

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

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

Vue

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

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

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

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

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

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

Angular

Angular *適合大型和高級(jí)項(xiàng)目。這些可能包括但不限于：

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

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

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

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

React

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

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

對(duì)于具有擴(kuò)展和增長(zhǎng)可能的項(xiàng)目，因?yàn)?React 組件具有聲明性，因此它可以輕松處理此類復(fù)雜結(jié)構(gòu)。

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

Vue

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

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

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

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

更早推出 MVP。

三、性能和開(kāi)發(fā)

Angular

Angular 性能方面的一些亮點(diǎn)包括：

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

提供強(qiáng)大的組件集合，從而簡(jiǎn)化了編寫(xiě)，更改和使用代碼的過(guò)程。

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

MVC 模型通過(guò)允許視圖分離來(lái)幫助減少后臺(tái)查詢。

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

通過(guò)將任務(wù)分成邏輯塊來(lái)減少網(wǎng)頁(yè)的初始加載時(shí)間。

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

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

React

在性能方面 React 與 Vue 不相上下，因?yàn)閮烧呔哂邢嗤募軜?gòu)，即與 DOM 的交互。React 開(kāi)發(fā) Web 的性能可以評(píng)估如下：

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

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

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

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

Vue

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

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

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

高級(jí)功能使它具有多功能性。

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

Angular

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

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

MVC 架構(gòu)。

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

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

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

Youtube TV | PayPal | Gmail | Forbes | Google Cloud

React

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

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

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

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

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

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

Vue

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

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

Vue.js 允許我們更新網(wǎng)頁(yè)中的元素，而無(wú)需渲染整個(gè) DOM，因?yàn)樗翘摂M的 DOM。

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

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

經(jīng)過(guò)驗(yàn)證的兼容性和靈活性。

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

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

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

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

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

本文總結(jié)

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

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