React是壹個UI庫，Angular是壹個成熟的前端框架，Vue.js是壹個漸進式框架。
它們幾乎可以互換使用來構建前端應用程序，但它們並不是100%相同的，因此比較它們並了解它們的差異是有意義的。
每個框架都是基於組件的，並允許快速創建UI功能。
然而，它們都有不同的結構和架構-所以首先，我們將研究它們的架構差異以了解它們背後的哲學。
React不強制執行特定的項目結構。從下面的官方“Hello World”示例中可以看到，只需幾行代碼就可以開始使用React。
React可以用作UI庫來呈現元素，而無需強制實施特定的項目結構，這就是為什麽它不是壹個嚴格的框架。
React元素是React應用程序的最小構建塊。它們比DOM元素更強大，因為React DOM確保它們在發生更改時得到有效更新。
組件是更大的構建塊，定義了在整個應用程序中使用的獨立和可重用的部分。它們接受稱為props的輸入並生成元素，然後顯示給用戶。
React基於JavaScript，但它主要與JSX（JavaScript XML）相結合，後者是壹種語法擴展，允許您創建包含HTML和JavaScript的元素。
使用JSX創建的任何東西也可以使用React JavaScript API創建，但大多數開發人員更喜歡JSX，因為它更直觀。
Vue.js的核心庫只關註視圖層。它之所以被稱為漸進式框架，是因為您可以使用官方和第三方軟件包（如Vue Router或Vuex）來擴展其功能並將其轉變為實際框架。
雖然Vue與MVVM（模型-視圖-視圖模型）模式沒有嚴格的聯系，但是它的設計部分受到了它的啟發。使用Vue，您將主要在ViewModel層上工作，以確保以允許框架呈現最新視圖的方式處理應用程序數據。
Vue的模板語法允許您創建視圖組件，並將熟悉的HTML與特殊指令和功能相結合。這種模板語法是首選，甚至支持原始的JavaScript和JSX。
Vue中的組件很小，是獨立的，可以在整個應用程序中重用。帶擴展名的單個文件組件（SFC）。vue包含HTML、CSS和JavaScript，因此所有相關代碼都在壹個文件中。
SFC是在Vue.js項目中組織代碼的推薦方法，尤其是大型項目。您需要使用Webpack或Browserify等工具將SFC轉換為可用的JavaScript代碼。
在本文中，我談論的是Angular 2，而不是現在稱為AngularJS的框架的第壹個版本。
最初的框架AngularJS是壹個MVC（模型-視圖-控制器）框架。但是在Angular 2中，它與MV *-模式沒有嚴格的關系，因為它也是基於組件的。
Angular中的項目被組織成模塊、組件和服務。每個Angular應用程序至少有壹個根組件和壹個根模塊。
Angular中的每個組件都包含壹個模板、壹個定義應用程序邏輯的類和元數據（裝飾器）。組件的元數據告訴Angular在哪裏可以找到創建和呈現視圖所需的構建塊。
Angular模板是用HTML編寫的，但它也可以包含帶有特殊指令的Angular模板語法，以輸出反應數據並呈現多個元素。
組件使用Angular中的服務來委托業務邏輯任務，例如獲取數據或驗證輸入。它們是Angular應用程序的獨特部分。盡管Angular並不強制使用它們，但強烈建議將應用程序構建為壹組可以重用的不同服務。
Angular內置於TypeScript中，因此建議將其用於最無縫的體驗，但它也支持純JavaScript。
React是最受歡迎的JavaScript項目之壹，在GitHub上有65，438+60萬顆星。它由臉書開發和維護，並在他們的許多項目中使用。此外，根據BuiltWith的使用統計，它支持超過200萬個網站。
三個框架中，Vue在GitHub上的星級最多，為176k。該項目由谷歌前員工尤雨溪開發和領導。根據BuiltWith的說法，這是開源社區中壹個非常強大的獨立項目，有超過654.38+0萬個網站使用該項目。
Angular是由谷歌開發的，但令人驚訝的是，它並沒有用於他們的壹些旗艦產品，如搜索或Youtube。它通常用於企業項目中，並基於BuiltWith的數據支持超過97，000個網站。
它在三個框架中擁有最少的星級，在GitHub上擁有68k星級。然而，當從Angular 1切換到Angular 2時，他們創建了壹個全新的代碼庫，而不是繼續AngularJS項目，該項目也有59k顆恒星。
開發應用程序時，開源軟件包可以為您節省寶貴的時間。不僅如此，它們通常比定制組件和軟件包更好，因為它們已經過實戰測試。
檢查現成組件、主題和其他工具的可用性非常重要，這些工具可以幫助您更輕松地創建新功能。
許多前端應用程序依賴全局狀態管理來存儲信息，例如誰登錄了以及其他用戶設置。
最流行的JavaScript狀態管理項目是Redux。大多數開發人員使用Redux的官方React綁定，這些綁定由Redux團隊維護。
由於React的普及，很容易找到輸入組件和現成的元素。他們都只是在谷歌或GitHub上搜索。
React生態系統還包括React Native，允許您從用React編寫的單個代碼庫構建原生iOS和Android應用程序。因此，React也可以成為使用Web技術構建移動應用程序的絕佳選擇。
React是MERN堆棧的壹部分，其中包括MongoDB、ExpressJS、React和NodeJS。這種結合的偉大之處在於，壹種語言——JavaScript——為整個應用程序提供了動力。
雖然Redux可以在Vue中使用，但沒有官方綁定。但這不應該讓妳擔心，因為Vuex是壹個專門為Vue應用程序制作的官方狀態管理庫。除了與Vue很好地集成之外，還可以很容易地使用Vue的開發人員工具進行調試。
在Vue的早期，很難找到現成的組件。隨著社區的發展，您可以使用各種輸入組件和高級元素來加快開發速度。
對於移動應用程序開發，有壹個名為Weex的新興項目。Weex由阿裏巴巴開發和使用，但它不如React Native成熟和強大。更重要的是，因為這個項目是在中國開發和使用的，所以很難找到英文文檔和問題的解決方案。
Vue和Laravel很好地集成在壹起，這就是它們經常壹起使用的原因。Laravel提供了完整的JavaScript和CSS腳手架，以支持在新項目中使用Vue。
對於Angular中的狀態管理，您可以使用NgRx項目。它的靈感來自Redux，但它是專門為Angular創建的。
與Vue和React的情況壹樣，您可以將許多現成的組件導入到項目中。與棱角略有不同的是，棱角材質有許多官方成分。這是谷歌的壹個官方項目，為Angular應用程序提供材料設計組件。
您可以使用NativeScript在Angular中構建跨平臺的移動應用程序。它也支持Vue，但Angular支持更成熟。
Angular是著名的MEAN stack的壹部分，它將Angular與MongoDB、ExpressJS和NodeJS結合在壹起。與MERN堆棧類似，其前端和後端完全依賴於JavaScript。
Angular、React和Vue都可以用於開發漸進式Web應用程序，也稱為PWA。
PWA不是移動應用程序，而是Web應用程序。智能手機用戶可以將其作為快捷方式添加到主屏幕上，並提供類似於原生移動應用程序的外觀和感覺。
您還可以找到每個框架的高級模板和預制應用程序，但Angular和React提供了比Vue更高級的選項。
在選擇框架或庫時，您還需要考慮性能。
在許多情況下，您不必擔心性能，尤其是在構建小型項目時。然而，項目的範圍和復雜性越大，性能將（並將）成為壹個問題。
值得註意的是，就Web性能而言，開發質量和遵循最佳實踐比框架的選擇更重要。
但是因為有壹些性能指標和差異，我將研究它們並解釋每個指標如何影響您的開發工作。
JS框架基準測試的結果表明，它們在大多數基準測試中表現相當好，例如在表中創建或附加行。
如上所述，Vue在選擇行時比Angular和React慢得多。另壹方面，Angular和React在交換行時效率很低。
這些是渲染基準中唯壹的實質性差異-在大多數情況下，它們不會產生明顯的結果。由於選擇行是比交換行更常見的功能，我想說這個基準測試將Vue排在第三位，僅次於Angular和React。
在內存和啟動時間方面，React和Vue的得分都不錯，但Angular稍慢壹些。Angular啟動壹個基本腳本可能需要150毫秒，並且它需要更多的內存來運行。
谷歌Chrome實驗室的性能跟蹤顯示了數千個網站的生產數據。這些統計數據受到許多其他因素的影響，而不僅僅是選擇的框架。讓我們看看數字。
與Angular相比，Vue和React網站在該指標中的排名更高，Angular需要更多的時間來啟動和向用戶呈現內容。
Angular也是三個框架中渲染完整頁面最慢的框架，只有27%的Angular網站得分在可接受的範圍內。
對於所有三個框架，超過80%的網站都在首次輸入延遲的可接受範圍內，該延遲顯示了用戶與頁面交互所需的時間。
到目前為止，最輕的應用程序是由Vue開發的應用程序，68%的Vue應用程序加載不到1MB的JavaScript。另壹方面，Angular和React應用程序往往具有較大的代碼大小。
妳可以從這些數字中看出趨勢，但妳不應該太快下結論。例如，對於最後壹張圖片，可以解釋為Vue用於開發較輕的應用程序，而Angular用於較大的項目。
統計數據可以幫助指導妳做出正確的決定，但妳不能用它們來證明壹個框架比另壹個框架更快或更好。
對於更高級的應用程序，所使用的前端框架應該能夠執行壹些提高性能的任務，並且可以更好地擴展。
兩項關鍵技術是服務器端渲染（SSR）和虛擬化。
React支持使用官方ReactDOMServer包進行服務器端渲染。對於虛擬化，您可以使用壹個流行的第三方工具React Virtualized。
Vue還支持服務器端渲染和官方SSR包。此外，您還可以使用Nuxt.js的框架，該框架基於Vue構建並支持SSR。
不幸的是，Vue中的虛擬化選項並沒有那麽強大。在我看來，Vue虛擬滾動列表是虛擬滾動的最佳解決方案，但它存在壹些問題，不如React和Angular的選項穩定。
Angular擁有SSR的官方Angular Universal包以及用於虛擬滾動和高效呈現大型列表的官方組件。
學習這些框架有多容易？
要回答這個問題，我們需要看看每個框架的復雜性及其引入的概念。
在最基本的用例中，React是三個框架中最不復雜的。這是因為您只需要導入庫，然後您就可以用幾行代碼開始編寫React應用程序。
但是除了Hello World的例子之外，大多數React應用程序都是基於組件的，而不僅僅是在頁面上呈現壹些元素。
壹些開發人員對React感到奇怪或困難的壹點是，學習JSX是壹條單行道。您也可以使用原始的JavaScript，但由於大多數React開發人員使用JSX，學習它幾乎是不可避免的。
這是使React的學習曲線更陡峭的主要因素，但除此之外，對於了解JavaScript並理解Web開發概念的開發人員來說，這是壹個簡單易學的庫。
Vue的設置比React稍微復雜壹些。您可以將它作為壹個庫來定義可以在整個HTML中使用的組件-但是像React壹樣，這不是大多數項目的構建方式。
大多數Vue項目都有壹個命名的根組件App.vue和壹些用於顯示各種內容的子組件。
說到語法，妳唯壹需要學習的新東西是Vue的模板語法，如果妳懂HTML的話很容易掌握。基本指令，如用於條件呈現和列表呈現的v-if和v-即使對於初學者也很容易理解。
此外，Vue的單個文件組件將所有前端代碼保存在壹個地方，這便於組織新項目。
在我看來，Vue是最容易學習的，因為它的語法簡單直觀。
Angular的項目結構是三者中最復雜的，由於它是壹個成熟的前端框架，因此它依賴於更多的概念。
除了組件，Angular還支持模塊和服務。它希望您以特定的方式編寫和設計代碼庫，從而使您的項目在擴展時更容易維護。
至於語法，在構建Angular項目時了解TypeScript非常重要，因為Angular最好與TypeScript壹起使用。
像Vue壹樣，您也必須熟悉類似HTML的語法，以便您可以開始使用Angular編寫新的UI功能。
在我看來，Angular是普通開發人員最難學習的，因為它更復雜並且依賴於TypeScript。
許多開源項目和框架逐漸被遺忘，無人問津。妳應該擔心我們在這裏討論的任何框架嗎？
盡管我們無法完全預測會發生什麽，但正在進行的開發工作很好地表明了這些項目的健康狀況。受歡迎程度和增長也是預測項目壽命的重要指標，因此讓我們來看看每個框架。
React v17.0已經發布，但令人驚訝的是，它沒有為開發人員提供任何新功能。
主要的變化是這個新版本可以更容易地升級React本身。您可以將React的某些部分從舊版本升級到新版本，而無需升級整個項目。
如果您的應用程序所依賴的功能在新版本中發生了更改或被否決，您可以保留舊版本以保持此功能有效。這次更新使React成為壹個很好的長期選擇，因為它可以更容易地跟上新版本。
自去年以來，React的每周npm下載量增長了44%。從絕對值來看，它仍然是三個項目中下載量最多的項目。
Vue 3於2020年9月發布，解決了Vue 2在大型項目中的許多嚴重問題。它引入了受React Hooks啟發的組合API，這使得跨組件重用邏輯更加容易。
整個項目用TypeScript重寫，這提高了新Vue項目中對TypeScript的支持，使項目更易於維護。
Vue 3是壹個急需的升級，使Vue更適合大型項目。
自去年以來，Vue的每周下載量增長了87%，使Vue成為增長最快的框架。如果Vue能保持這個增長速度，肯定會很快超過Angular。
Angular最近推出了Ivy編譯器。它減少了構建時間，優化了資產，允許更快的測試，並從總體上改善了開發人員的體驗。
Angular團隊每年發布兩次重大更新，其中可能包括新功能或只是使框架與新瀏覽器版本保持同步。
自去年以來，Angular的每周下載量增加了約50%，因此它仍然是壹個受歡迎的項目。
Angular、React和Vue都處於非常活躍的開發階段。他們定期發布新版本並維護現有版本。因為每種情況下的當前支持級別都很高，所以您可以安全地使用這些框架中的任何壹種。
應該註意的是，Angular的增長沒有以前那麽快，而Vue-盡管它最近才開始-似乎增長了很多。
如上所述，我們無法預測哪些框架將保持長期相關性，但每個項目背後都有壹個偉大的社區，並且它在不斷發展。
本文的目標是解釋架構差異，分解每個框架的優缺點，並在適用的情況下進行比較。
在進入壹個新的框架之前，有幾件事情需要考慮。
首先，在選擇新技術時，您團隊的經驗可能是決定性因素。
同樣，您必須考慮您所在地區的可用人才，以便您可以為您的項目雇傭開發人員。
最後，當涉及到項目本身時，復雜性和範圍也會影響您對框架的選擇。
通過考慮所有關鍵差異，我希望您可以決定哪個前端框架最適合您的目標和需求。
（本文翻譯自Aris Pattakos的文章《Angular vs React vs Vue 2021》，請註明出處，原文鏈接:/guides/Angular-vs-React-vs-Vue/）