[[389623]]

【51CTO.com快譯】作為開發(fā)人員，您一定聽說過知名的UI庫—React、成熟的前端框架—Angular、以及最新的漸進(jìn)式框架--Vue。顯然，它們都有各種獨(dú)特的優(yōu)勢和性能指標(biāo)。本文將和您討論這三種架構(gòu)在不同方面的優(yōu)缺點(diǎn)，以方便您在實(shí)際應(yīng)用中做出選擇。

許可證

作為首要考慮的因素，我們通常在選擇開源框架或軟件庫之前，徹底檢查它們的許可證。目前，React、Angular和Vue都使用著MIT許可證，因此它們?yōu)橛脩籼峁┝擞邢薜氖褂贸潭?。您需要在使用之前，認(rèn)真了解每種許可證的具體含義。

架構(gòu)

Angular

隸屬于MEAN棧的Angular框架，是各個(gè)初創(chuàng)企業(yè)熱門采用的技術(shù)棧。它基于TypeScript的Web應(yīng)用開發(fā)完整框架，主要用于構(gòu)建單頁面的Web應(yīng)用(SPA)。

與原始框架AngularJS不同的是，由于基于組件，因此Angular 2與各種MV*模式并無緊密關(guān)聯(lián)。Angular的結(jié)構(gòu)主要包括了模塊(Modules)、組件(Components)和服務(wù)(Services)。

在Angular框架中，每個(gè)組件都有一個(gè)獨(dú)立的類或模板，可用于定義應(yīng)用邏輯與元數(shù)據(jù)(Decorators)。此類元數(shù)據(jù)可以提供，有關(guān)創(chuàng)建和顯示其視圖所需塊位置的指引。

Angular體系架構(gòu)中的另一個(gè)重要因素是，由HTML編寫的各種模板。它們可以包括帶有特殊指令的Angular模板語法，用以輸出反應(yīng)性數(shù)據(jù)，并能提交多個(gè)元素。

服務(wù)作為Angular應(yīng)用中的一個(gè)獨(dú)特元素，可以被組件用來委派諸如：獲取數(shù)據(jù)或驗(yàn)證輸入等業(yè)務(wù)邏輯任務(wù)。雖未明確要求，但是Angular建議用戶將應(yīng)用構(gòu)造為一組可被重復(fù)使用的完全不同的服務(wù)。

React

作為一種開源的前端庫，React主要被用于開發(fā)用戶界面。由于這種靈活的前端方案，并未對特定的項(xiàng)目結(jié)構(gòu)有強(qiáng)制要求，因此React開發(fā)人員只需幾行代碼，即可開始使用。

雖然基于JavaScript，但在大多數(shù)情況下，React可與JSX(JavaScript XML)結(jié)合在一起。后者是一種語法擴(kuò)展，它允許開發(fā)人員同時(shí)創(chuàng)建包含HTML和JavaScript的元素。實(shí)際上，那些由JSX所創(chuàng)建的任何內(nèi)容，都可以被開發(fā)人員使用React JavaScript API來創(chuàng)建。相比DOM，React不但有著更強(qiáng)大的元素，并且它們是React應(yīng)用的最小構(gòu)建塊。而React組件則是決定了是否要在整個(gè)Web應(yīng)用中，獨(dú)立且可重用使用的構(gòu)建塊。

Vue

作為一個(gè)開源的Model-View-View-Model前端JS庫，Vue可被用于開發(fā)用戶界面和SPA。由于屬于漸進(jìn)式框架，因此它能夠與其他工具一起用在前端開發(fā)中。Vue憑借著其多功能性、高性能、以及在Web應(yīng)用上的用戶體驗(yàn)，而廣受歡迎。

在使用Vue的過程中，開發(fā)人員通常會工作在View Model層上，以確保目標(biāo)框架通過呈現(xiàn)最新的視圖，來處理應(yīng)用數(shù)據(jù)。Vue的模板語法能夠?qū)⒖勺R別的HTML，與各種特殊指令功能相結(jié)合。開發(fā)人員可以使用該語法來創(chuàng)建視圖組件。

Vue中的組件不但可重用，而且體積小且獨(dú)立。例如，由于擴(kuò)展名為.vue的單文件組件(Single File Components，SFC)支持HTML、JavaScript和CSS，因此它可以將所有相關(guān)代碼都集中到一個(gè)文件中。

在大型Vue.js項(xiàng)目中，為了使用SFC來組織代碼，我們可以借用Webpack或Browserify之類的工具，將SFC轉(zhuǎn)換為有效的JavaScript代碼。

意圖和范圍

Angular

Angular比較適合大型和高級項(xiàng)目。其主要功能包括：

• 可用來開發(fā)漸進(jìn)式Web應(yīng)用(Progressive Web App，PWA)。
• 可重新設(shè)計(jì)網(wǎng)站應(yīng)用。
• 能夠設(shè)計(jì)和建立基于內(nèi)容的動態(tài)網(wǎng)頁。
• 可創(chuàng)建需要復(fù)雜基礎(chǔ)架構(gòu)的大型企業(yè)應(yīng)用。

React

來自MERN棧家族的React，是一種以構(gòu)建復(fù)雜的業(yè)務(wù)應(yīng)用聞名的技術(shù)棧。作為一款強(qiáng)大的工具，React可與Redux、MobX或其他流量模式庫一起使用。React比較適合如下項(xiàng)目：

• 帶有導(dǎo)航項(xiàng)、折疊/展開式菜單、能顯示活躍/非活躍狀態(tài)與按鈕、動態(tài)輸入、用戶登錄、以及訪問權(quán)限分配等，帶有多個(gè)組件的應(yīng)用程序。
• 由于React組件具有聲明性，因此它可以輕松地處理具有增長和可擴(kuò)展需求復(fù)雜項(xiàng)目結(jié)構(gòu)。
• 各種以UI為重點(diǎn)的Web應(yīng)用。

Vue

由于Vue的學(xué)習(xí)曲線平緩且容易上手，因此它比較適合解決短期問題。通過與現(xiàn)有代碼塊的輕松集成，Vue能夠被用于如下場景中：

• 需要具有動畫、或交互式元素的Web應(yīng)用開發(fā)項(xiàng)目。
• 無需高級技術(shù)即可交付原型的需求。
• 需要與多個(gè)應(yīng)用程序無縫集成的應(yīng)用。
• 需要快速推出MVP(Model-View-Presenter)的需求。

性能與開發(fā)

Angular

Angular在性能上具有如下優(yōu)點(diǎn)：

• 為了增強(qiáng)產(chǎn)品/應(yīng)用的功能，可與第三方無縫集成。
• 通過提供強(qiáng)大的組件集合，以簡化編寫、更改和使用代碼的過程。
• 其“提前編譯器(ahead-of-time-compiler)”能夠提升加載時(shí)間和安全強(qiáng)度。
• MVC模型通過允許視圖分離，來幫助減少后臺的查詢。
• 促進(jìn)將依賴項(xiàng)注入，用作將組件解耦的外部元素。這些為可重用性、以及簡化管理與測試鋪平了道路。
• 通過將任務(wù)分成邏輯塊，來減少網(wǎng)頁的初始加載時(shí)間。
• 可完全定制化的設(shè)計(jì)。
• 有助于將HTML和TypeScript編譯為JavaScript，進(jìn)而加快瀏覽器在加載Web應(yīng)用之前的代碼編譯速度。

React

在性能方面，React可與Vue媲美，畢竟兩者都有相同的架構(gòu)，都能與DOM交互。React在Web開發(fā)方面的性能特性如下：

• 支持捆綁，這對于減少最終用戶的資源占用是至關(guān)重要的。
• 由于提供了單向數(shù)據(jù)的綁定支持，因此可以更好地控制項(xiàng)目。
• 用戶可以輕松地對其進(jìn)行測試和監(jiān)控。
• 適合那些需要頻繁更改的復(fù)雜應(yīng)用。

Vue

Vue的性能主要體現(xiàn)在如下方面：

• 更平緩的學(xué)習(xí)曲線。
• 能夠高效地處理復(fù)雜的單頁面應(yīng)用。
• 提供豐富的高端性能。

各自優(yōu)勢

Angular

• 提供各種模板、表單、引導(dǎo)程序、相關(guān)體系架構(gòu)、組件、以及組件之間交互的詳細(xì)信息。
• 平滑的雙向數(shù)據(jù)綁定。
• 支持MVC體系架構(gòu)。
• 內(nèi)置模塊系統(tǒng)。
• 大幅減少網(wǎng)頁的初始加載時(shí)間。

使用Angular構(gòu)建的流行應(yīng)用程序包括：Tesla、AirBnB、CNN、Nike、Udemy、Linked-in。

React

• 憑借著其模塊化的結(jié)構(gòu)和靈活的代碼，可為用戶節(jié)省開發(fā)時(shí)間和成本。
• 能為復(fù)雜的應(yīng)用提供高性能。
• 在前端開發(fā)期間，更易于維護(hù)代碼。
• 支持適用于Android和iOS平臺的移動原生應(yīng)用。

使用React構(gòu)建的流行應(yīng)用包括：Tesla、AirBnB、CNN、Nike、Udemy、Linked-in。

• 體積小巧，便于安裝和下載。
• 可復(fù)用。
• 憑借著虛擬化，Vue.js能夠更新網(wǎng)頁中的各種元素，而無需提交整個(gè)DOM。
• 需要較少的額外優(yōu)化工作。
• 為增強(qiáng)Web應(yīng)用開發(fā)，它允許專家將“模板到虛擬”(template-to-virtual)DOM與編譯器分開。
• 提供可靠的兼容性和靈活性。
• 提供獨(dú)立于應(yīng)用規(guī)模的固定代碼庫。

用Vue構(gòu)建的流行應(yīng)用包括：Gitlab、Spendesk、Behance、9Gag、Wizzair、Nintendo。

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

• React JS庫是由Facebook創(chuàng)建的。它擁有大量的開發(fā)人員及其社區(qū)，可為各種問題提供廣泛的解決方案。
• Angular同樣擁有大量的開發(fā)人員社區(qū)。它們能夠?yàn)槟切O具挑戰(zhàn)性的、怪異的問題尋求答案。
• Vue也具有良好的生態(tài)系統(tǒng)。

在學(xué)習(xí)曲線方面，React可供用戶快速學(xué)習(xí)和實(shí)踐，Vue和Angular則次之。

小結(jié)

總而言之，從前端開發(fā)的角度來看，學(xué)習(xí)和使用React是首選。輕量級的Vue和React則更直觀，且性能更優(yōu)。

原文標(biāo)題：Angular vs. React vs. Vue: Which Framework is Best in 2021?，作者: Nir Sharma

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】