angular和vue和react的區別
一些歷史
Angular 是基於 TypeScript 的 Javascript 框架。由 Google 進行開發和維護，它被描述為“超級厲害的 JavaScript MVW 框架”。Angular（也被稱為 “Angular 2+”，“Angular 2” 或者 “ng2”）已被重寫，是與 AngularJS（也被稱為 “Angular.js” 或 “AngularJS 1.x”）不相容的後續版本。當 AngularJS（舊版本）最初於2010年10月釋出時，仍然在修復 bug，等等 —— 新的 Angular（sans JS）於 2016 年 9 月推出版本 2。最新的主版本是 4，因為版本 3 被跳過了
React 被描述為 “用於構建使用者介面的 JavaScript 庫”。React 最初於 2013 年 3 月釋出，由 Facebook 進行開發和維護，Facebook 在多個頁面上使用 React 元件（但不是作為單頁應用程式）。根據 Chris Cordle 這篇文章的統計，React 在 Facebook 上的使用遠遠多於 Angular 在 Google 上的使用。React 還被 Airbnb，Uber，Netflix，Twitter，Pinterest，Reddit，Udemy，Wix，Paypal，Imgur，Feedly，Stripe，Tumblr，Walmart 等使用（根據
Facebook 正在開發 React Fiber。它會改變 React 的底層 - 渲染速度應該會更快 - 但是在變化之後，版本會向後相容。Facebook 將會在 2017 年 4 月的開發者大會上討論新變化，併發布一篇非官方的關於新架構的文章。React Fiber 可能與 React 16 一起釋出。
Vue 是 2016 年發展最為迅速的 JS 框架之一。Vue 將自己描述為一款“用於構建直觀，快速和元件化互動式介面的 MVVM 框架”。它於 2014 年 2 月首次由 Google 前員工 Evan You
Angular 和 Vue 都遵守 MIT license 許可，而 React 遵守 。在專利檔案上有很多討論。James Ide（前 Facebook 工程師）解釋專利檔案背後的原因和歷史：Facebook 的專利授權是在保護自己免受專利訴訟的能力的同時分享其程式碼。專利檔案被更新了一次，有些人聲稱，如果你的公司不打算起訴 Facebook，那麼使用 React 是可以的。你可以在 Github 的這個 issue 上 檢視討論。我不是律師，所以如果 React 許可證對你或你的公司有問題，你應該自己決定。關於這個話題還有很多文章：Dennis Walsh 寫到，你為什麼不該害怕。Raúl Kripalani 警告：反對創業公司使用 React，他還寫了一篇備忘錄概覽。此外，Facebook 上還有一個最新的宣告：解釋 React 的許可證。
核心開發
如前所述，Angular 和 React 得到大公司的支援和使用。Facebook，Instagram 和 WhatsApp 正在它們的頁面使用 React。Google 在很多專案中使用 Angular，例如，新的 Adwords 使用者介面是使用 Angular 和 Dart。然而，Vue 是由一群通過 Patreon 和其他贊助方式支援的個人實現的，是好壞你自己確定。Matthias Götzke 認為 Vue 小團隊的好處是用了更簡潔和更少的過度設計的程式碼或 API。
我們來看看一些統計資料：Angular 在團隊介紹頁列出 36 人，Vue 列出 16 人，而 React 沒有團隊介紹頁。在 Github 上，Angular 有 25,000+ 的 star 和 463 位程式碼貢獻者，React 有 70,000+ 的 star 和 1,000+ 位程式碼貢獻者，而 Vue 有近 60,000 的 star 和只有 120 位程式碼貢獻者。你也可以檢視 Angular，React 和 Vue 的 Github Star 歷史。又一次說明 Vue 的趨勢似乎很好。根據 bestof.js 提供的資料顯示，在過去三個月 Angular 2 平均每天獲得 31 個 star，React 74 個，Vue.JS 107 個。
Angular，React 與 Due 的 Github Star 歷史 (資料來源)
更新: 感謝 Paul Henschel 提出的 npm 趨勢。npm 趨勢顯示了 npm 包的下載次數，相對比單獨地看 Github star 更有用：
在過去 2 年，npm 包的下載次數
市場生命週期
由於各種名稱和版本，很難在 Google 趨勢中比較 Angular，React 和 Vue。一種近似的方法可以是“網際網路與技術”類別中的搜尋。結果如下：
Vue 沒有在 2014 年之前建立 - 所以這裡有什麼不對勁。La Vue是法語的 “view” ，“sight” 或 “opinion”。也許就是這樣。“VueJS” 和 “Angular” 或 “React” 的比較也是不公平的，因為 VueJS 幾乎沒有搜尋到任何結果。
那我們試試別的吧。ThoughtWorks 的 Technology Radar 技術隨時間推移的變化。ThoughtWorks 的 Technology Radar 隨著時間推移，技術的演進過程給人深刻的印象。Redux 是在採用階段（被 ThoughtWorks 專案採用的！），它在許多 ThoughtWorks 專案中的價值是不可估量的。Vue.js 是在試用階段（被試著用的）。Vue被描述為具有平滑學習曲線的，輕量級並具靈活性的Angular的替代品。Angular 2 是正在處於評估階段 使用 —— 已被 ThoughtWork 團隊成功實踐，但是還沒有被強烈推薦。
根據 2017 年 Stackoverflow 的最新調查，被調查的開發者中，喜愛 React 有 67%，喜歡 AngularJS 的有 52%。“沒有興趣在開發中繼續使用”的開發者佔了更高的數量，AngularJS（48%）和 React（33%）。在這兩種情況下，Vue 都不在前十。然後是 statejs.com 關於比較 “前端框架” 的調查。最有意思的事實是：React 和 Angular 有 100% 的認知度，23% 的受訪者不瞭解 Vue。關於滿意度，92% 的受訪者願意“再次使用” React ，Vue 有 89% ,而 Angular 2 只有 65%。
客戶滿意度調查呢？Eric Elliott 於 2016 年 10 月開始評估 Angular 2 和 React。只有 38% 的受訪者會再次使用 Angular 2，而 84% 的人會再次使用 React。
長期支援和遷移
Facebook 在其設計原則中指出，React API 非常穩定。還有一些指令碼可以幫助你從當前的API移到更新的版本：請查閱 react-codemod。遷移是非常容易的，沒有這樣的東西（需要）作為長期支援的版本。在 Reddit 這篇文章中指出，人們看到到升級從來不是問題。React 團隊寫了一篇關於他們版本控制方案的部落格文章。當他們新增棄用警告時，在下一個主要版本中的行為發生更改之前，他們會保留當前版本的其餘部分。沒有計劃更改為新的主要版本 - v14 於 2015 年 10 月釋出，v15 於 2016 年 4 月釋出，而 v16 還沒有釋出日期。（譯者注：v16 於 2017 年 9 月底釋出）最近 React核心開發人員指出，升級不應該是一個問題。
關於 Angular，從 v2 釋出開始，有一篇關於版本管理和釋出 Angular 的部落格文章。每六個月會有一次重大更新，至少有六個月的時間（兩個主要版本）。在文件中有一些實驗性的 API 被標記為較短的棄用期。目前還沒有官方公告，但根據這篇文章，Angular 團隊已經宣佈了以 Angular 4 開始的長期支援版本。這些將在下一個主要版本釋出之後至少一年得到支援。這意味著至少在 2018 年 9 月之前，將支援 Angular 4，並提供 bug 修復和重要補丁。在大多數情況下，將 Angular 從 v2 更新到 v4 與更新 Angular 依賴關係一樣簡單。Angular 還提供了有關是否需要進一步更改的資訊指南。
Vue 1.x 到 2.0 的更新過程對於一個小應用程式來說應該很容易 - 開發者團隊已經聲稱 90% 的 API 保持不變。在控制檯上有一個很好的升級 - 診斷遷移 - 輔助工具。一位開發人員指出，從 v1 到 v2 的更新在大型應用程式中仍然沒有挑戰。不幸的是，關於 LTS 版本的下一個主要版本或計劃資訊沒有清晰的（公共）路徑。
還有一件事：Angular 是一個完整的框架，提供了很多捆綁在一起的東西。React 比 Angular 更靈活，你可能會使用更多獨立的，不穩定的，快速更新的庫 - 這意味著你需要自己維護相應的更新和遷移。如果某些包不再被維護，或者其他一些包在某些時候成為事實上的標準，這也可能是不利的。
人力資源與招聘
如果你的團隊有不需要了解更多 Javascript 技術的 HTML 開發人員，則最好選擇 Angular 或 Vue。React 需要了解更多的 JavaScript 技術（我們稍後再談）。
你的團隊有工作時可以敲程式碼的設計師嗎？Reddit 上的使用者 “pier25” 指出，如果你在 Facebook 工作，每個人都是一個資深開發者，React 是有意義的。然而事實上，你不會總是找到一個可以修改 JSX 的設計師，因此使用 HTML 模板將會更容易。
Angular 框架的好處是來自另一家公司的新的 Angular 2 開發人員將很快熟悉所有必要的約定。React 專案在架構決策方面各不相同，開發人員需要熟悉特定的專案設定。
如果你的開發人員具有面向物件的背景或者不喜歡 Javascript，Angular 也是很好的選擇。為了推動這一點，這裡是 Mahesh Chand 引述：
我不是一個 JavaScript 開發人員。我的背景是使用 “真正的” 軟體平臺構建大型企業系統。我從 1997 年開始使用 C，C ++，Pascal，Ada 和 Fortran 構建應用程式。（...）我可以清楚地說，JavaScript 對我來說簡直是胡言亂語。作為 Microsoft MVP 和專家，我對 TypeScript 有很好的理解。我也不認為 Facebook 是一家軟體開發公司。但是，Google 和微軟已經是最大的軟體創新者。我覺得使用 Google 和微軟強大支援的產品會更舒服。另外（...）與我的背景，我知道微軟對 TypeScript 有更巨集偉的藍圖。
emmmmmmmm...... 我應該提到的，Mahesh 是微軟的區域總監。
React，Angular 和 Vue 的比較
元件
我們所討論的框架都是基於元件的。一個元件得到一個輸入，並且在一些內部的行為/計算之後，它返回一個渲染的 UI 模板（一個登入/登出區或一個待辦事項列表項）作為輸出。定義的元件應該易於在網頁或其他元件中重用。例如，你可以使用具有各種屬性（列，標題資訊，資料行等）的網格元件（由一個標題元件和多個行元件組成），並且能夠在另一個頁面上使用具有不同資料集的元件。這裡有一篇關於元件的綜合性文章，如果你想了解更多這方面的資訊。
React 和 Vue 都擅長處理元件：小型的無狀態的函式接收輸入和返回元素作為輸出。
Typescript，ES6 與 ES5
React 專注於使用 Javascript ES6。Vue 使用 Javascript ES5 或 ES6。
Angular 依賴於 TypeScript。這在相關示例和開源專案中提供了更多的一致性（React 示例可以在 ES5 或 ES6 中找到）。這也引入了像裝飾器和靜態型別的概念。靜態型別對於程式碼智慧工具非常有用，比如自動重構，跳轉到定義等等 - 它們也可以減少應用程式中的錯誤數量，儘管這個話題當然沒有共識。Eric Elliott 在他的文章 “靜態型別的令人震驚的祕密” 中不同意上面的觀點。Daniel C Wang 表示，使用靜態型別並沒有什麼壞處，同時有測試驅動開發（TDD）和靜態型別挺好的。
如果你在用 TypeScript 編寫程式碼，那麼你不需要再編寫標準的 JavaScript 了。儘管它在不斷髮展，但與整個 JavaScript 語言相比，TypeScript 的使用者群仍然很小。一個風險可能是你正在向錯誤的方向發展，因為 TypeScript 可能 - 也許不太可能 - 隨著時間的推移也會消失。此外，TypeScript 為專案增加了很多（學習）開銷 - 你可以在 Eric Elliott 的 Angular 2 vs. React 比較 中閱讀更多關於這方面的內容。
更新: James Ravenscroft 在對這篇文章的評論中寫道，TypeScript 對 JSX 有一流的支援 - 可以無縫地對元件進行型別檢查。所以，如果你喜歡 TypeScript 並且你想使用 React，這應該不成問題。
模板 —— JSX 還是 HTML
React 打破了長期以來的最佳實踐。幾十年來，開發人員試圖分離 UI 模板和內聯的 Javascript 邏輯，但是使用 JSX，這些又被混合了。這聽起來很糟糕，但是你應該聽彼得·亨特（Peter Hunt）的演講 “React：反思最佳實踐”（2013 年 10 月）。他指出，分離模板和邏輯僅僅是技術的分離，而不是關注的分離。你應該構建元件而不是模板。元件是可重用的、可組合的、可單元測試的。
JSX 是一個類似 HTML 語法的可選前處理器，並隨後在 JavaScript 中進行編譯。JSX 有一些怪癖 —— 例如，你需要使用 className 而不是 class，因為後者是 Javascript 的保留字。JSX 對於開發來說是一個很大的優勢，因為程式碼寫在同一個地方，可以在程式碼完成和編譯時更好地檢查工作成果。當你在 JSX 中輸入錯誤時，React 將不會編譯，並列印輸出錯誤的行號。Angular 2 在執行時靜默失敗（如果使用 Angular 中的預編譯，這個引數可能是無效的）。
JSX 意味著 React 中的所有內容都是 Javascript -- 用於JSX模板和邏輯。Cory House 在 2016 年 1 月的文章 中指出：“Angular 2 繼續把 'JS' 放到 HTML 中。React 把 'HTML' 放到 JS 中。“這是一件好事，因為 Javascript 比 HTML 更強大。
Angular 模板使用特殊的 Angular 語法（比如 ngIf 或 ngFor）來增強 HTML。雖然 React 需要 JavaScript 的知識，但 Angular 會迫使你學習 Angular 特有的語法。
Vue 具有“單個檔案元件”。這似乎是對於關注分離的權衡 - 模板，指令碼和樣式在一個檔案中，但在三個不同的有序部分中。這意味著你可以獲得語法高亮，CSS 支援以及更容易使用前處理器（如 Jade 或 SCSS）。我已經閱讀過其他文章，JSX 更容易除錯，因為 Vue 不會顯示不規範 HTML 的語法錯誤。這是不正確的，因為 Vue 轉換 HTML 來渲染函式 - 所以錯誤顯示沒有問題（感謝 Vinicius Reis 的評論和更正！）。
框架和庫
Angular 是一個框架而不是一個庫，因為它提供了關於如何構建應用程式的強有力的約束，並且還提供了更多開箱即用的功能。Angular 是一個 “完整的解決方案” - 功能齊全，你可以愉快的開始開發。你不需要研究庫，路由解決方案或類似的東西 - 你只要開始工作就好了。
另一方面，React 和 Vue 是很靈活的。他們的庫可以和各種包搭配。（在 npm 上有很多 React 的包，但 Vue 的包比較少，因為畢竟這個框架還比較新）。有了 React，你甚至可以交換庫本身的 API 相容替代品，如 Inferno。然而，靈活性越大，責任就越大 - React 沒有規則和有限的指導。每個專案都需要決定架構，而且事情可能更容易出錯。
另一方面，Angular 還有一個令人困惑的構建工具，樣板，檢查器（linter）和時間片來處理。如果使用專案初始套件或樣板，React 也是如此。他們自然是非常有幫助的，但是 React 可以開箱即用，這也許是你應該學習的方式。有時，在 JavaScript 環境中工作要使用各種工具被稱為 “Javascript 疲勞症”。Eric Clemmons 在他的文章 中說：
當開始使用框架，還有一堆安裝的工具，你可能會不習慣。這些都是框架生成的。很多開發人員不明白，框架內部發生了什麼 —— 或者需要花費很多時間才能搞明白。
Vue.js 完美的兼顧了它將為你做什麼和你需要做什麼。（...）Vue.js 始終是可及的，一個堅固，但靈活的安全網，保證程式設計效率和把操作 DOM 造成的痛苦降到最低。
他們喜歡簡單易用 —— 原始碼非常易讀，不需要任何文件或外部庫。一切都非常簡單。Vue.js “對任何東西都不做大的假設”。還有一個關於 GitLab 決定的播客節目。
另一個來自 Pixeljets 的關於向 Vue 轉變的博文。React “是 JS 界在意識層面向前邁出的一大步，它以一種實用簡潔的方式向人們展示了真正的函數語言程式設計。和 Vue 相比，React 的一大缺點是由於 JSX 的限制，元件的粒度會更小。這裡是文章的引述：
對於我和我的團隊來說，程式碼的可讀性是很重要的，但編寫程式碼很有趣也是非常重要的。在實現真正簡單的計算器小部件時建立 6 個元件並不奇怪。在許多情況下，在維護，修改或對某個小部件進行視覺化檢查方面也是不好的，因為你需要繞過多個檔案/函式並分別檢查每個小塊的 HTML。再次，我不是建議寫巨石 - 我建議在日常開發中使用元件而不是微元件。
關於 Hacker news 和 Reddit 上的部落格文章有趣的討論 - 有來自 Vue 的持異議者和進一步支持者的爭論。
狀態管理和資料繫結
構建使用者介面很困難，因為處處都有狀態 - 隨著時間的推移而變化的資料帶來了複雜性。定義的狀態工作流程對於應用程式的增長和複雜性有很大的幫助。對於複雜度不大的應用程式，就不必定義的狀態流了，像原生 JS 就足夠了。
它是如何工作的？元件在任何時間點描述 UI。當資料改變時，框架重新渲染整個 UI 元件 - 顯示的資料始終是最新的。我們可以把這個概念稱為“ UI 即功能”。
React 經常與 Redux 在一起使用。Redux 以三個基本原則來自述：
- 單一資料來源（Single source of truth）
- State 是隻讀的（State is read-only）
- 使用純函式執行修改（Changes are made with pure functions）
換句話說：整個應用程式的狀態儲存在單個 store 的狀態樹中。這有助於除錯應用程式，一些功能更容易實現。狀態是隻讀的，只能通過 action 來改變，以避免競爭條件（這也有助於除錯）。編寫 Reducer 來指定如何通過 action 來轉換 state。
大多數教程和樣板檔案都已經集成了 Redux，但是如果沒有它，你可以使用 React（你可能不需要在你的專案中使用 Redux）。Redux 在程式碼中引入了複雜性和相當強的約束。如果你正在學習React，那麼在你要使用 Redux 之前，你應該考慮學習純粹的 React。你絕對應該閱讀 Dan Abramov 的“你可能不需要 Redux”。
有些開發人員 建議使用 Mobx 代替 Redux。你可以把它看作是一個 “自動的 Redux”，這使得事情一開始就更容易使用和理解。如果你想了解，你應該從介紹開始。你也可以閱讀 Robin 的 Redux 和 MobX 的比較。他還提供了有關從 Redux 遷移到 MobX 的資訊。如果你想查詢其他 Flux 庫，這個列表非常有用。如果你是來自 MVC 的世界，那麼你應該閱讀 Mikhail Levkovsky 的文章“Redux 中的思考（當你所知道的是 MVC）”。
Vue 可以使用 Redux，但它提供了 Vuex 作為自己的解決方案。
React 和 Angular 之間的巨大差異是 單向與雙向繫結。當 UI 元素（例如，使用者輸入）被更新時，Angular 的雙向繫結改變 model 狀態。React 只有一種方法：先更新 model，然後渲染 UI 元素。Angular 的方式實現起來程式碼更乾淨，開發人員更容易實現。React 的方式會有更好的資料總覽，因為資料只能在一個方向上流動（這使得除錯更容易）。
這兩個概念各有優劣。你需要了解這些概念，並確定這是否會影響你選擇框架。文章“雙向資料繫結：Angular 2 和 React”和這個 Stackoverflow 上的問題都提供了一個很好的解釋。在這裡你可以找到一些互動式的程式碼示例（3 年前的示例（，只適用於 Angular 1 和 React）。最後，Vue 支援單向繫結和雙向繫結（預設為單向繫結）。
其他的程式設計概念
Angular 包含依賴注入（dependency injection），即一個物件將依賴項（服務）提供給另一個物件（客戶端）的模式。這導致更多的靈活性和更乾淨的程式碼。文章 “理解依賴注入” 更詳細地解釋了這個概念。
模型 - 檢視 - 控制器模式（MVC）將專案分為三個部分：模型，檢視和控制器。Angular（MVC 模式的框架）有開箱即用的 MVC 特性。React 只有 V —— 你需要自己解決 M 和 C。
靈活性與精簡到微服務
你可以通過僅僅新增 React 或 Vue 的 JavaScript 庫到你的原始碼中的方式去使用它們。但是由於 Angular 使用了 TypeScript，所以不能這樣使用 Angular。
現在我們正在更多地轉向微服務和微應用。React 和 Vue 通過只選擇真正需要的東西，你可以更好地控制應用程式的大小。它們提供了更靈活的方式去把一個老應用的一部分從單頁應用（SPA）轉移到微服務。Angular 最適合單頁應用（SPA），因為它可能太臃腫而不能用於微服務。
JavaScript 發展速度很快，而且 React 可以讓你將應用程式的一小部分替換成更好用的 JS 庫，而不是期待你的框架能夠創新。小巧，可組合的單一用途工具的理念永遠不會過時。
有些人對非單頁的網站也使用 React（例如複雜的表單或嚮導）。甚至 Facebook 都沒有把 React 用在 Facebook 的主頁，而是用在特定的頁面，實現特定的功能。
體積和效能
任何框架都不會十全十美：Angular 框架非常臃腫。gzip 檔案大小為 143k，而 Vue 為 23K，React 為 43k。
為了提高效能，React 和 Vue 都使用了虛擬 DOM（Virtual DOM）。如果你對此感興趣，可以閱讀虛擬 DOM 和 DOM 之間的差異以及 react.js 中虛擬 DOM 的實際優勢。此外，虛擬 DOM 的作者之一在 Stackoverflow 上回答了效能的相關問題。
為了檢查效能，我看了一下最佳的 js 框架基準。你可以自己下載並執行它，或者檢視互動式結果表。
Angular，React 和 Vue 效能比較（原始檔）
記憶體分配（原始檔）
總結一下：Vue 有著很好的效能和高深的記憶體分配技巧。如果比較快慢的話，這些框架都非常接近（比如 Inferno）。請記住，效能基準只能作為考慮的附註，而不是作為判斷標準。
測試
Facebook 使用 Jest 來測試其 React 程式碼。這裡有篇 Jest 和 Mocha 之間的比較的文章 —— 還有一篇關於 Enzyme 和 Mocha 如何一起使用 的文章。Enzyme 是 Airbnb 使用的 JavaScript 測試工具（與 Jest，Karma 和其他測試框架一起使用）。如果你想了解更多，有一些關於在 React（這裡和這裡）測試的舊文章。
Angular 2 中使用 Jasmine 作為測試框架。Eric Elliott 在一篇文章中抱怨說 Jasmine “有數百種測試和斷言的方式，需要仔細閱讀每一個，來了解它在做什麼”。輸出也是非常臃腫和難以閱讀。有關 Angular 2 與 Karma 和 Mocha 的整合的一些有用的文章。這裡有一個關於 Angular 2 測試策略的舊視訊（從2015年起）。
通用與原生 app
通用 app 正在將應用程式引入 web、搬上桌面，同樣將深入原生 app 的世界。
React 和 Angular 都支援原生開發。Angular 擁有用於原生應用的 NativeScript（由 Telerik 支援）和用於混合開發的 Ionic 框架。藉助 React，你可以試試 react-native-renderer 來構建跨平臺的 iOS 和 Android 應用程式，或者用 react-native 開發原生 app。許多 app（包括 Facebook；檢視更多的展示）都是用 react-native 構建的。
Javascript 框架在客戶端上渲染頁面。這對於效能，整體使用者體驗和 SEO 是不利的。伺服器端預渲染是一個好辦法。所有這三個框架都有相應的庫來實現服務端渲染。React 有 next.js，Vue 有 nuxt.js，而 Angular 有...... Angular Universal。
學習曲線
Angular 的學習曲線確實很陡。它有全面的文件，但你仍然可能被嚇哭，因為說起來容易做起來難。即使你對 Javascript 有深入的瞭解，也需要了解框架的底層原理。去初始化專案是很神奇的，它會引入很多的包和程式碼。因為有一個大的，預先存在的生態系統，你需要隨著時間的推移學習，這很不利。另一方面，由於已經做出了很多決定，所以在特定情況下可能會很好。對於 React，你可能需要針對第三方庫進行大量重大決策。僅僅 React 中就有 16 種不同的 flux 軟體包來用於狀態管理可供選擇。
Vue 學習起來很容易。公司轉向 Vue 是因為它對初級開發者來說似乎更容易一些。這裡有一片說他們團隊為什麼從 Angular 轉到 Vue的文章。另一位使用者表示，他公司的 React 應用程式非常複雜，以至於新開發人員無法跟上程式碼。有了 Vue，初級和高階開發人員之間的差距縮小了，他們可以更輕鬆地協作，減少 bug，減少解決問題的時間。
有些人說他們用 React 做的東西比用 Vue 做的更好。如果你是一個沒有經驗的 Javascript 開發人員 - 或者如果你在過去十年中主要使用 jQuery，那麼你應該考慮使用 Vue。轉向 React 時，思維方式的轉換更為明顯。Vue 看起來更像是簡單的 Javascript，同時也引入了一些新的概念：元件，事件驅動模型和單向資料流。這同樣是很小的部分。
同時，Angular 和 React 也有自己的實現方式。它們可能會限制你，因為你需要調整自己的做法，才能順暢的開發。這可能是一個缺點，因為你不能隨心所欲，而且學習曲線陡峭。這也可能是一個好處，因為你在學習技術時必須學習正確的概念。用 Vue，你可以用老方法來做。這一開始可能會比較容易上手，但長此以往會出現問題。
在除錯方面，React 和 Vue 的黑魔法更少是一個加分項。找出 bug 更容易，因為需要看的地方少了，堆疊跟蹤的時候，自己的程式碼和那些庫之間有更明顯的區別。使用 React 的人員報告說，他們永遠不必閱讀庫的原始碼。但是，在除錯 Angular 應用程式時，通常需要除錯 Angular 的內部來理解底層模型。從好的一面來看，從 Angular 4 開始，錯誤資訊應該更清晰，更具資訊性。
Angular, React 和 Vue 底層原理
你想自己閱讀原始碼嗎？你想看看事情到底是怎麼樣的嗎？
在生產環境中檢視也很容易 —— 連同底層的原始碼。TodoMVC 列出了幾十個相同的 Todo 應用程式，用不同的 Javascript 框架編寫 —— 你可以比較 Angular，React 和 Vue 的解決方案。RealWorld 建立了一個真實世界的應用程式（中仿），他們已經準備好了 Angular（4+）和 React（帶 Redux ）的解決方案。Vue 的開發正在進行中。
你可以看到許多真實的 app，以下是 React 的方案：
- Do（一款很好用的筆記管理 app，用 React 和 Redux 實現）
- sound-redux（用 React 和 Redux 實現的 Soundcloud 客戶端）
- Brainfock（用 React 實現的專案和團隊管理解決方案）
以下是 Angular 版的 app：
以下是 Vue 版的 app：
總結
現在決定使用哪個框架
React，Angular 和 Vue 都很酷，而且沒有一個能明顯的超過對方。相信你的直覺。最後一點有趣的玩世不恭的言辭可能會有助於你的決定：
這個骯髒的小祕密就是大多數 “現代 JavaScript 開發” 與實際構建網站無關 —— 它正在構建可供構建可供人們使用的庫或者包，這些人可以為編寫教程和教授課程的人構建框架。我不確定任何人實際上正在為實際使用者建立任何互動。
當然，這是誇張的，但是可能有一點點道理。是的，Javascript生態系統中有很多雜音。在你搜索的過程中，你可能會發現很多其他有吸引力的選項 —— 儘量不要被最新，最閃亮的框架矇蔽。
我應該選什麼？
如果你在Google工作：Angular
如果你喜歡 TypeScript：Angular（或 React）
如果你喜歡面向物件程式設計（OOP）: Angular
如果你需要指導手冊，架構和幫助：Angular
如果你在Facebook工作：React
如果你喜歡靈活性：React
如果你喜歡大型的技術生態系統：React
如果你喜歡在幾十個軟體包中進行選擇：React
如果你喜歡JS和“一切都是 Javascript 的方法”：React
如果你喜歡真正乾淨的程式碼：Vue
如果你想要最平緩的學習曲線：Vue
如果你想要最輕量級的框架：Vue
如果你想在一個檔案中分離關注點：Vue
如果你一個人工作，或者有一個小團隊：Vue（或 React）
如果你的應用程式往往變得非常大：Angular（或 React）
如果你想用 react-native 構建一個應用程式：React
如果你想在圈子中有很多的開發者：Angular 或 React
如果你與設計師合作，並需要乾淨的 HTML 檔案：Angular or Vue
如果你喜歡 Vue 但是害怕有限的技術生態系統：React
如果你不能決定，先學習 React，然後 Vue，然後 Angular。
二：不同的理解與分析
前端這幾年的技術發展很快，細分下來，主要可以分成四個方面：
- 開發語言技術，主要是ES6&7，coffeescript，typescript等；
- 開發框架，如Angular，React,Vue.js，Angular2等；
- 開發工具的豐富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha這些技術；
就開發框架這塊，Angular(1&2),React,Vue目前佔據著主流地位而且會相持比較長的一段時間，所以這裡對比一下這三門技術，以便之後的技術選型。
一. 趨勢
Vue.js
Reactjs
Angularjs
2.對比
雖然放在一起Angular還是最火的，但從單個趨勢圖可以看出來reactjs和vuejs明顯是火箭一般上升。很明顯可以看到Angular在16時候有個大跌幅，那時候正是React坐火箭上升最快的。就是那時候很多Angular的專案轉成了React。如果Angular沒有出2，那估計Angular就真的離滅亡不遠了。
3.GitHub受歡迎程度
4.定位
雖然Vue.js被定義為MVC framework，但其實Vue本身還是一個library，加了一些其他的工具，可以被當成一個framework。ReactJS也是library，同樣道理，配合工具也可以成為一個framework。AngularJS（本文AngularJS特指Angular 1， Angular 2特指第二版Angular）是一個framework，而Angular 2雖然還是一個framework，但其實在設計之初，Angular 2的團隊站在了更高的角度，希望做一個platform。
5.上手容易度
Vue.js hello world
ReactJS hello world
** 6.文件清晰度**
現在的前端framework，用起來就像按照說明書使用家用電器一樣。按照文件一步步寫就好了，所以文件的清晰度非常重要。同時小夥伴也很重要，越多的人使用，那遇到一樣問題的人就越多，stackoverflow上面可能早就有幫你解決問題的小夥伴了。就這幾個來說，我個人認為Vue.js的文件最懇切。我認為結合文件和遇到問題Google答案的匹配度來講：
Vue.js > ReactJS > AngularJS > Angular 2
二. 資料流
1.Angular 使用雙向繫結即：介面的操作能實時反映到資料，資料的變更能實時展現到介面。
實現原理：
$scope
變數中使用髒值檢查來實現。像ember.js是基於setter，getter的觀測機制，
$scope.$watch
函式，監視一個變數的變化。函式有三引數，”要觀察什麼”，”在變化時要發生什麼”,以及你要監視的是一個變數還是一個物件。
使用ng-model時，你可以使用雙向資料繫結。 使用$scope.$watch
（檢視到模型）以及$scope.$apply
（模型到檢視），還有$scope.$digest
雙向繫結的三個重要方法：
$scope.$apply()$scope.$digest()$scope.$watch()
在AngularJS雙向繫結中，有2個很重要的概念叫做dirty check，digest loop，dirty check（髒檢測）是用來檢查繫結的scope中的物件的狀態的，例如，在js裡建立了一個物件，並且把這個物件繫結在scope下，這樣這個物件就處於digest loop中，loop通過遍歷這些物件來發現他們是否改變，如果改變就會**呼叫相應的處理方法來實現雙向繫結。
-
Vue 也支援雙向繫結，預設為單向繫結，資料從父元件單向傳給子元件。在大型應用中使用單向繫結讓資料流易於理解。
和Vue相比（劣）：
Vue.js 有更好的效能，並且非常非常容易優化，因為它不使用髒檢查。Angular，當 watcher 越來越多時會變得越來越慢，因為作用域內的每一次變化，所有 watcher 都要重新計算。
並且，如果一些 watcher 觸發另一個更新，髒檢查迴圈（digest cycle）可能要執行多次。 Angular 使用者常常要使用深奧的技術，以解決髒檢查迴圈的問題。有時沒有簡單的辦法來優化有大量 watcher 的作用域。
Vue.js 則根本沒有這個問題，因為它使用基於依賴追蹤的觀察系統並且非同步列隊更新，所有的資料變化都是獨立地觸發，除非它們之間有明確的依賴關係。唯一需要做的優化是在 v-for 上使用 track-by。 -
React-單向資料流
MVVM流的Angular和Vue，都是通過類似模板的語法，描述介面狀態與資料的繫結關係，然後通過內部轉換，把這個結構建立起來，當介面發生變化的時候，按照配置規則去更新相應的資料，然後，再根據配置好的規則去，從資料更新介面狀態。
React推崇的是函數語言程式設計和單向資料流：給定原始介面（或資料），施加一個變化，就能推匯出另外一個狀態（介面或者資料的更新）。
React和Vue都可以配合Redux來管理狀態資料。
三. 檢視渲染
- AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成為AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,所有的指令都負責針對view(即HTML中的ng-model)來設定資料繫結。因此, NG框架是在DOM載入完成之後, 才開始起作用的。
React - React 的渲染建立在 Virtual DOM 上——一種在記憶體中描述 DOM 樹狀態的資料結構。當狀態發生變化時，React 重新渲染 Virtual DOM，比較計算之後給真實 DOM 打補丁。
Virtual DOM 提供了函式式的方法描述檢視，它不使用資料觀察機制，每次更新都會重新渲染整個應用，因此從定義上保證了檢視與資料的同步。它也開闢了 JavaScript 同構應用的可能性。
在超大量資料的首屏渲染速度上，React 有一定優勢，因為 Vue 的渲染機制啟動時候要做的工作比較多，而且 React 支援服務端渲染。
React 的 Virtual DOM 也需要優化。複雜的應用裡可以選擇 1. 手動新增 shouldComponentUpdate 來避免不需要的 vdom re-render；2. Components 儘可能都用 pureRenderMixin，然後採用 Flux 結構 + Immutable.js。其實也不是那麼簡單的。相比之下，Vue 由於採用依賴追蹤，預設就是優化狀態：動了多少資料，就觸發多少更新，不多也不少。
React 和 Angular 2 都有服務端渲染和原生渲染的功能。 - Vue.js 不使用 Virtual DOM 而是使用真實 DOM 作為模板，資料繫結到真實節點。Vue.js 的應用環境必須提供 DOM。Vue.js 有時效能會比 React 好，而且幾乎不用手工優化。
四. 效能與優化
效能方面，這幾個主流框架都應該可以輕鬆應付大部分常見場景的效能需求，區別在於可優化性和優化對於開發體驗的影響。Vue 的話需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable，Angular 2 需要手動指定 change detection strategy。從整體趨勢上來說，瀏覽器和手機還會越變越快，框架本身的渲染效能在整個前端效能優化體系中，會漸漸淡化，更多的優化點還是在構建方式、快取、圖片載入、網路鏈路、HTTP/2 等方面。
五. 模組化與元件化
Angular1 -> Angular2
Angular1使用依賴注入來解決模組之間的依賴問題，模組幾乎都依賴於注入容器以及其他相關功能。不是非同步載入的，根據依賴列出第一次載入所需的所有依賴。
可以配合類似於Require.js來實現非同步載入，懶載入（按需載入）則是藉助於 ocLazyLoad 方式的解決方案，但是理想情況下應該是本地框架會更易懂。
Angular2使用ES6的module來定義模組，也考慮了動態載入的需求。
Vue
Vue中指令和元件分得更清晰。指令只封裝 DOM 操作，而元件代表一個自給自足的獨立單元 —— 有自己的檢視和資料邏輯**。在 Angular1 中兩者有不少相混的地方。
React
一個 React 應用就是構建在 React 元件之上的。 元件有兩個核心概念：props,state。 一個元件就是通過這兩個屬性的值在 render 方法裡面生成這個元件對應的 HTML 結構。
傳統的 MVC 是將模板放在其他地方，比如 script 標籤或者模板檔案，再在 JS 中通過某種手段引用模板。按這種思路，想想多少次我們面對四處分散的模板片段不知所措？糾結模板引擎，糾結模板存放位置，糾結如何引用模板。
React 認為元件才是王道，而元件是和模板緊密關聯的，元件模板和元件邏輯分離讓問題複雜化了。所以就有了 JSX 這種語法，就是為了把 HTML 模板直接嵌入到 JS 程式碼裡面，這樣就做到了模板和元件關聯，但是 JS 不支援這種包含 HTML 的語法，所以需要通過工具將 JSX 編譯輸出成 JS 程式碼才能使用（可以進行跨平臺開發的依據，通過不同的直譯器解釋成不同平臺上執行的程式碼，由此可以有RN和React開發桌面客戶端）。
六. 語法與程式碼風格
React,Vue,Angular2都支援ES6，Angular2官方擁抱了TypeScript這種 JavaScript 風格。
React 以 JavaScript 為中心，Angular 2 依然保留以 HTML 為中心。Angular 2 將 “JS” 嵌入 HTML。React 將 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 試圖讓 HTML 更強大的方式。
React 推薦的做法是 JSX + inline style，也就是把 HTML 和 CSS 全都整進 JavaScript 了。Vue 的預設 API 是以簡單易上手為目標，但是進階之後推薦的是使用 webpack + vue-loader 的單檔案元件格式（template,script,style寫在一個vue檔案裡作為一個元件）
七. 一些大公司使用例子
1. Vue
2. React
阿里，React 和React-native (杭州)
知乎的評論功能
3. angular2
新出的例子少
八. 總結
1. 上手難度
Vue < react < angular
2. 使用場景
Vue React 覆蓋中小型，大型專案。
angular 一般用於大型（因為比較厚重）。
優缺點
3. 渲染效能
Vue> react >angular
渲染效能
4. 前端庫實力引數對比
image.png
以上3大框架均不支援IE8以下；
IE9以下解決方法:Bootstrap (在IE8也會不支援一些樣式和屬性)+jQuery；
其他框架穩定性欠缺
作者：Su丶_33b0
連結：https://www.jianshu.com/p/b2b8161c9565
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。