前端架構React，Angular和Vue詳解
- 1. 三種架構概述
- 2. Vue概述
-
- 2.1 Vue簡介
- 2.2 Vue起源
- 2.3 Vue特點
- 3. React簡介
-
- 3.1 React概述
- 3.2 React起源
- 3.3 React特點
- 4. Angular概述
-
- 4.1 Angular簡介
- 4.2 Angular起源
- 4.3 Angular特點
- 5. 三種架構對比分析
-
- 5.1 開源性質
- 5.2 核心發展
- 5.3 靈活性
- 5.4 性能
- 5.5 對比總結
1. 三種架構概述
React，Angular，Vue是目前比較主流的三種前端web應用建構工具。
2. Vue概述
2.1 Vue簡介
Vue：漸進式JavaScript 架構。官網位址：https://v3.cn.vuejs.org/
2.2 Vue起源
Vue是當今世界上發展最快的JavaScript架構之一。Vue被描述為“用于建構互動式界面的直覺，快速且可組合的MVVM。”它于2014年2月首次釋出。它是前Google員工Evan You的心血結晶。2016年，Vue第2版釋出。它被阿裡巴巴，百度，GitLab和其他公司使用。
2.3 Vue特點
1.易用
已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始建構應用！
2.靈活
不斷繁榮的生态系統，可以在一個庫和一套完整架構之間自如伸縮。
3.高效
20kB min+gzip 運作大小
超快虛拟 DOM
最省心的優化
3. React簡介
3.1 React概述
React：用于建構使用者界面的 JavaScript 庫。官網位址：https://react.docschina.org/
3.2 React起源
React于2013年3月首次釋出，被描述為JavaScript庫。React由Facebook開發和維護。Facebook在多個頁面上使用React用于許多元件，但不用于建立單個頁面應用程式。React也被Uber，Netflix，Twitter，Reddit，Udemy，Paypal，Walmart和其他人使用。
3.3 React特點
1.聲明式
React 使建立互動式 UI 變得輕而易舉。為你應用的每一個狀态設計簡潔的視圖，當資料變動時React 能高效更新并渲染合适的元件。
以聲明式編寫 UI，可以讓你的代碼更加可靠，且友善調試。
2.元件化
建構管理自身狀态的封裝元件，然後對其組合以構成複雜的 UI。
由于元件邏輯使用 JavaScript 編寫而非模闆，是以你可以輕松地在應用中傳遞資料，并保持狀态與 DOM 分離。
3.一次學習，随處編寫
無論你現在使用什麼技術棧，在無需重寫現有代碼的前提下，通過引入 React 來開發新功能。
React 還可以使用 Node 進行伺服器渲染，或使用 React Native 開發原生移動應用。
4. Angular概述
4.1 Angular簡介
Angular：現代 Web 開發平台。官網位址：https://angular.cn/
4.2 Angular起源
Angular是一個基于TypeScript的JavaScript架構。它由Google開發和維護。它于2010年10月首次釋出，但此後經曆了多次更新，目前正在使用Angular 6. Angular被描述為“超級英雄JavaScript MVW架構。”Angular被Google，Wix，weather.com，Forbes和其他人使用。
4.3 Angular特點
1.橫跨所有平台
學會用 Angular 建構應用，然後把這些代碼和能力複用在多種多種不同平台的應用上 —— Web、移動 Web、移動應用、原生應用和桌面原生應用。
2.速度與性能
通過 Web Worker 和服務端渲染，達到在如今(以及未來）的 Web 平台上所能達到的最高速度。
Angular 讓你有效掌控可伸縮性。基于 RxJS、Immutable.js 和其它推送模型，能适應海量資料需求。
3.美妙的工具
使用簡單的聲明式模闆，快速實作各種特性。使用自定義元件和大量現有元件，擴充模闆語言。在幾乎所有的 IDE 中獲得針對 Angular 的即時幫助和回報。所有這一切，都是為了幫助你編寫漂亮的應用，而不是絞盡腦汁的讓代碼“能用”。
4.百萬粉絲熱捧
從原型到全球部署，Angular 都能帶給你支撐 Google 大型應用的那些高延展性基礎設施與技術。
5. 三種架構對比分析
5.1 開源性質
Angular，React和Vue都在MIT許可下提供。
5.2 核心發展
Angular和React受到Facebook，Google，Whatsapp等大公司的支援和使用。目前，Google在他們的許多項目中使用Angular，例如AdWords UI（使用Angular和Dart實作）。而Vue主要用于小型項目的個人。
GitHub統計資料：
Angular擁有超過25,000顆星和463個貢獻者。
React擁有超過70,000顆星和超過1,000名貢獻者。
Vue擁有近6萬顆星，僅有120位貢獻者。
5.3 靈活性
我們可以通過簡單地将JavaScript庫添加到源應用程式來開始使用React或Vue進行開發工作。但是對于Angular來說這是不可能的，因為它使用TypeScript。因為在當今的Web開發世界中，我們正在更多地接近微服務和微應用程式，React和Vue通過僅選擇那些真正需要的東西來讓我們更好地控制應用程式的大小。 Angular最适合作為基于SPA的應用程式的架構。
5.4 性能
在庫或架構的大小的情況下，Angular相對于其他選項而言相當大。gzip檔案大小為143k，而Vue為23k，React為43k。React和Vue都使用Virtual DOM，它可以提高浏覽器DOM的性能。在整體分析中，Vue具有出色的性能和三者最深的記憶體配置設定。但是所有這三個選項在性能方面都非常接近。
5.5 對比總結
Angular：
想要使用TypeScript
想要使用OOPS（面向對象程式設計）
想要使用基于結果的架構
想要建構混合應用程式
擁有大量的開發維護人員
如果要将html分開用于設計目的。
React：
想要使用基于JavaScript的方法類庫
想要使用大型生态系統
想要靈活性
想要建構本機應用程式
開發團隊包含大量開發人員
想要為JavaScript代碼和html代碼保留單個檔案。
Vue：
基于最簡單的JavaScript學習曲線
從事小型項目
開發團隊包含少數的開發人員
如果要将html分開用于設計目的。