作為開發(fā)人員，您一定聽說過知名的UI庫—React、成熟的前端框架—Angular、以及最新的漸進式框架--Vue。顯然，它們都有各種獨特的優(yōu)勢和性能指標。本文將和您討論這三種架構在不同方面的優(yōu)缺點，以方便您在實際應用中做出選擇。

許可證

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

架構

Angular

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

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

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

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

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

React

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

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

Vue

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

在使用Vue的過程中，開發(fā)人員通常會工作在View Model層上，以確保目標框架通過呈現最新的視圖，來處理應用數據。Vue的模板語法能夠將可識別的HTML，與各種特殊指令功能相結合。開發(fā)人員可以使用該語法來創(chuàng)建視圖組件。

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

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

意圖和范圍

Angular

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

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

React

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

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

Vue

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

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

性能與開發(fā)

Angular

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

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

React

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

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

Vue

Vue的性能主要體現在如下方面：

• 更平緩的學習曲線。
• 能夠高效地處理復雜的單頁面應用。
• 提供豐富的高端性能。

各自優(yōu)勢

Angular

• 提供各種模板、表單、引導程序、相關體系架構、組件、以及組件之間交互的詳細信息。
• 平滑的雙向數據綁定。
• 支持MVC體系架構。
• 內置模塊系統(tǒng)。
• 大幅減少網頁的初始加載時間。

使用Angular構建的流行應用程序包括：Tesla、AirBnB、CNN、Nike、Udemy、Linked-in。

React

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

使用React構建的流行應用包括：Tesla、AirBnB、CNN、Nike、Udemy、Linked-in。

• 體積小巧，便于安裝和下載。
• 可復用。
• 憑借著虛擬化，Vue.js能夠更新網頁中的各種元素，而無需提交整個DOM。
• 需要較少的額外優(yōu)化工作。
• 為增強Web應用開發(fā)，它允許專家將“模板到虛擬”(template-to-virtual)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可供用戶快速學習和實踐，Vue和Angular則次之。

小結

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

本文題目：Angular、React與Vue，那個框架更好？
文章位置：http://uogjgqi.cn/article/cdsgpjc.html