Angular vs React vs Vue 三個框架的比較

loudf 2018-08-24

展開全文

Foreword：

首先那要說明下,，以下是我看到的一篇文章，但是原文是英文的,，我只是做一個搬運工把他搬過來~主要也是為了能在搬運過程中更好的理解作者的想法,。OK，廢話到此為止,。

Started:

為你的 web 應用選擇一個框架是無法抗拒的,。Angular 和 React 最近都很受歡迎，最近又出現(xiàn)了一個新貴吸引了很多關(guān)注： VueJS ,。而且,，這些只是在這個領(lǐng)域新鮮血液的一部分。所以,，我們應該怎樣選擇,？一個關(guān)于利弊的清單總是沒有壞處的。

在我們開始之前?—?SPA or not?

首先,，你應該明確你的應用是否需要單頁面應用還是多頁面的方法,。你可以通過去閱讀這篇文章作者的博客,，有一篇關(guān)于多頁面和單頁面應用的對比，做出適合你的選擇,。

如今的新人 Angular, React , Vue

首先,，我想討論一下生命周期和長遠的考慮。然后,，我們將重點轉(zhuǎn)向這三個 JavaScript 框架的功能和概念。最后,，得出我們的結(jié)論,。

以下是我們今天要解決的問題：

框架和庫有多成熟？
框架可能會在很短的時間內(nèi)出現(xiàn)嗎,？
他們相應的社區(qū)有廣泛的幫助嗎,？
為每個框架找到相應的開發(fā)者的困難程度？
框架的基本編程概念是什么,？
對一個大項目或者小項目來說，使用框架的難易程度,？
每個框架的學習曲線是什么樣的,？
你希望框架能夠給你提供怎樣的性能？
在底層的能否有更仔細的了解,？
用選擇的框架如何開始開發(fā),？

準備就緒，開始,！

1. 生命周期和長遠的考慮

1.1 歷史

Angular 是一個基于 TypeScript 的 Javascript 框架,。由 Google 開發(fā)和維護，它被描述為“超級英雄般的JavaScript MVW 框架”,。 Angular（也稱為“Angular 2+”,，“Angular 2”或“ng2”）是 AngularJS（也稱為“Angular.js”或“AngularJS 1.x”）的改寫，大多為升級了兼容性的繼承者,。盡管最初般被的 AngularJS 于2010年10月發(fā)布,，但它仍然在修復bug等問題。新的Angular（sans JS）于2016年9月推出,，版本為2.最新的主要版本為版本4,，版本3被跳過。Google,，Wix,，weather.com，healthcare.gov 和 Forbes 在使用Angular,。

React 被描述為“用于構(gòu)建用戶界面的 JavaScript 庫”,。 React 最初于2013年3月發(fā)布,，由 Facebook 開發(fā)并維護，在多個頁面上使用 React 組件（不是作為單頁應用程序）,。根據(jù) Chris Cordle 撰寫的這篇文章,，React 在 Facebook 上的使用遠遠多于 Angula r在Google上的使用。 React 也被Airbnb,，Uber,，Netflix，Twitter,，Pinterest,，Reddit，Udemy,，Wix,，Paypal，Imgur,，F(xiàn)eedly,，Stripe，Tumblr,，Walmart 等等,。

Facebook 正在開發(fā)React Fiber。它會改變引擎蓋下的 React 渲染速度應該更快,。更新之后,，會向后兼容。 Facebook 在2017年4月的開發(fā)者大會上討論了這些變化,，并發(fā)布了一篇關(guān)于新架構(gòu)的非官方文章,。 React Fiber 于2017年9月發(fā)布了 React 16。

Vue 是2016年發(fā)展最迅速的 JS 框架之一. Vue 將自己描述為“用于構(gòu)建交互式界面的直觀,，快速和可組合的 MVVM 框架”,。該框架于2014年2月首次由前 Google 員工尤雨溪發(fā)布，當時寫了一篇關(guān)于營銷活動和數(shù)字的有趣的博客文章,。這是一次非常成功的比賽,，尤其是考慮到 Vue 在沒有大公司支持的情況下獲得如同一個人的表演一樣的吸引力。 Vue 目前擁有一批核心開發(fā)人員,。 2016年,，版本2發(fā)布。 Vue 被阿里巴巴,、百度,、Expedia、任天堂和 GitLab 使用，小型項目列表可以在 madewithvuejs.com 上找到,。

以上的三中框架都采用 MIT 許可,。直到2017年9月，React 轉(zhuǎn)向特殊的 BSD3 許可,。有關(guān)專利文件的討論很多,。如果您對這段歷史感興趣，您可以閱讀 Github 相關(guān)的問題討論,，專利文件背后的原因和歷史（由 Facebook 前工程師 James Ide 撰寫）,，為什么您不應該害怕（由 Dennis Walsh 提供），警告不要使用創(chuàng)業(yè)公司（由 RaúlKripalani 提供）以及 Facebook 上關(guān)于此主題的陳述：解釋 React 的許可,。無論如何,，所有這些都不應該像 Facebook 最終宣布的那樣，React 將使用 MIT 許可,。

1.2 核心發(fā)展

綜上所述,，Angular 和 React 擁有大公司的支持和使用。Facebook,，Instagram 和 Whatsapp 將 React 用于他們的頁面,。谷歌在很多項目中使用它，例如,，新的 Adwords 用戶界面是使用 Angular＆Dart 實現(xiàn)的,。再次，Vue 是由一群通過 Patreon 和其他贊助方式支持其工作的個人實現(xiàn)的,。您可以自行決定這是正面還是負面。 MatthiasG?tzke 認為 Vue 的小團隊是一個好處,，因為它會導致更簡潔,，更少的過度設計的代碼或者 API。讓我們來看看一些統(tǒng)計數(shù)據(jù)：Angular 在他們的團隊頁面上列出了36個人,，Vue 列出了16個人,，而 React 沒有團隊頁面。在 Github 上,，Angular 擁有超過25,000星和463名貢獻者,，React 擁有超過7萬星和超過1,000個貢獻者，而 Vue 擁有近6萬的星和120名貢獻者,。您還可以查看 Github Stars 的 Angular,，React 和 Vue 歷史。再次,，Vue 似乎趨勢非常好,。根據(jù) bestof.js 的數(shù)據(jù)，在過去三個月中，Angular2 的平均每天獲得31顆星,，React 74顆星和 Vue.JS 107顆星,。

1.3 市場生命周期

由于各種名稱和版本，很難在 Google 的趨勢中比較 Angular,，React 和 Vue,。一種近似的方法可能是搜索“ Internet＆technologies ”類別。結(jié)果如下：

好吧,。 Vue 在2014年前還沒有被創(chuàng)建,，所以這里有些不對勁。 La Vue是法國人的“觀看”,，“視線”或“意見”,。也許就是這樣。 VueJS 和 Angular 或 React 的比較也不公平,，因為 VueJS 幾乎沒有任何結(jié)果,。

那么，我們試試其他的東西吧,。 ThoughtWorks 的技術(shù)雷達給人留下了良好的印象,，關(guān)于技術(shù)如何隨著時間演變的。 Redux 正處于采用階段,，并且它在許多 ThoughtWorks 項目中具有無可估量的價值,。 Vue.js 正處于試用階段。它被描述為 Angular 的輕量級和靈活的替代品,，學習曲線較低,。 Angular2 處于評估階段，它已被 ThoughtWork 團隊成功使用,，但尚未獲得強有力的推薦,。根據(jù)上一次 Stackoverflow 2017調(diào)查，React 被67％的被調(diào)查開發(fā)者喜愛而 AngularJS 則是52％,。沒有興趣繼續(xù)開發(fā)使用 AngularJS 的為48%,，React 為33%。在這兩項調(diào)查中,，Vue 都沒有進入前十名,。接下來是 statejs.com 調(diào)查，比較了“前端框架”,。最有趣的事實：React 和 Angular 有100％的認知度,，23％被調(diào)查的人不知道 Vue。關(guān)于滿意度,，會再次使用的 React 有92％,，Vue 89％而 Angular 2僅獲得65％,。另一個客戶滿意度調(diào)查呢？ Eric Elliott 于2016年10月開始評估Angular 2和 React,。只有38％的受訪者會再次使用 Angular 2,，而84％的人會再次使用 React。

1.4長期支持和遷移

正如 Facebook 在其設計原則中所述,，React API 非常穩(wěn)定,。還有一些腳本可以幫助您從當前的 API 轉(zhuǎn)移到更新的 API ：react-codemod。遷移非常簡單,，并且不需要作為長期支持版本,。在這篇 Reddit 文章中，人們注意到升級并不是個問題,。 React 團隊撰寫了一篇關(guān)于他們的版本控制計劃的博客文章,。當他們發(fā)布棄用警告時，他們會在下一個主要版本中的行為更改之前保留當前版本的其余部分,。以下沒有計劃更改為新的主要版本 - v14于2015年10月發(fā)布,，v15于2016年4月發(fā)布，而v16尚未發(fā)布日期,。正如React核心開發(fā)人員最近指出的,，升級不應該是一個問題。

關(guān)于 Angular,，有一篇關(guān)于版本控制和發(fā)布 Angular 的博客,，從 v2 發(fā)布開始。每六個月會有一次重大更新,，并且至少有六個月（兩次主要發(fā)布）的棄用期,。在文檔中標記了一些實驗性的 API，其擁有較短的棄用期,。目前還沒有官方聲明,，但根據(jù)這篇文章，Angular 團隊已經(jīng)宣布了從 Angular 4開始的長期支持版本,。這些版本將在下一個主要版本發(fā)布之后至少支持一年,。這意味著至少在2018年9月之前支持 Angular 4,，并提供 bug 修復和重要補丁,。在大多數(shù)情況下，將 Angular 從v2更新到v4與更新 Angular 依賴關(guān)系一樣簡單,。 Angular 還提供了有關(guān)是否需要進一步更改的信息指南,。

Vue 1.x到2.0的更新過程對于一個小應用程序來說應該很容易，開發(fā)人員團隊聲稱90％的API 保持不變,。在控制臺上有一個很好的升級,，診斷遷移、輔助工具。一位開發(fā)人員指出,，從v1到v2的更新在大型應用程序中沒有什么改變,。不幸的是，關(guān)于下一個主要版本或關(guān)于長期支持版本計劃的信息沒有清晰的（公共）路線圖,。

還有一件事：Angular 是一個完整的框架,，并提供了很多捆綁在一起的東西。 React 比Angular 更靈活,，你可能會使用更獨立,，不穩(wěn)定，更快速方便的庫,，這意味著您需要自行處理相應的更新和遷移,。如果某些包裹不再被保留，或者某些其他包裹在某些時候成為事實上的基準,，這也可能是不利的,。（沒搞懂作者這句換的意思...）

1.5人力資源和招聘

如果你的 HTML 開發(fā)人員不想學習更多的 Javascript，最好選擇 Angular 或 Vue,。 React 需要學習更多的 Javascript（稍后會討論這個）,。你有沒有設計人員接近代碼？用戶“pier25”在 Reddit 上指出,，React 讓你有一種感覺,，如果你在 Facebook 工作，每個人都是超級英雄般的開發(fā)人員,。在現(xiàn)實中,，你不一定能找到一個可以修改 JSX 的設計師。因此,，使用 HTML 模板將更容易,。

關(guān)于 Angular 的好處是，從另一家公司新來的的 Angular 2開發(fā)人員將很快熟悉所有必要的約定,。由于在架構(gòu)決策 React 則各不相同,，開發(fā)人員需要熟悉特定的項目設置。

如果你的開發(fā)人員具有面向?qū)ο蟮谋尘盎蛘卟幌矚g Javascript,，那么 Angular 也很好,。為了支持這個歌觀點，以下是馬赫什昌德的話：

I am not a JavaScript developer. My background is building large-scale enterprise systems using “real” software platforms. I started in 1997 building applications using C, C++, Pascal, Ada, and Fortran. (…) I can clearly say that JavaScript is just gibberish to me. Being a Microsoft MVP and expert, I have a good understanding of TypeScript. I also don’t see Facebook as a software development company. However, Google and Microsoft are already the largest software innovators. I feel more comfortable working with a product that has strong backing from Google and Microsoft. Also (…) with my background, I know Microsoft has even bigger plans for TypeScript.

好吧......我應該提到,，Mahesh 是微軟的區(qū)域總監(jiān),。

2. React, Angular & Vue 的比較

2.1組件

以上討論的框架都是基于組件的。組件獲取輸入,，并在內(nèi)部執(zhí)行一些行為或計算之后,，它返回一個呈現(xiàn)的 UI 模板（登錄/注銷區(qū)或待辦事項列表項）作為輸出,。定義的組件有利于在網(wǎng)頁或其他組件中重復使用。例如,，您可以擁有包含各種屬性（列,，標題信息，數(shù)據(jù)行等）的網(wǎng)格組件（包含標題組件和多個行組件）,，并且可以在另一個頁面上使用具有不同數(shù)據(jù)集的組件,。
React 和 Vue在處理組件方面都很出色：小的、無狀態(tài)的函數(shù)接收輸入,，然后返回元素作為輸出,。

2.2 Typescript vs. ES6 vs. ES5

React 專注于使用Javascript ES6。 Vue 則使用Javascript ES5和ES6,。

Angular 依賴于 TypeScript,。這為相關(guān)示例和開源項目提供了更多一致性（React示例可以在ES5或ES6中找到）。TypeScript 也引入了像裝飾器和靜態(tài)類型的概念,。靜態(tài)類型對于代碼智能工具很有用,，例如自動重構(gòu)，跳轉(zhuǎn)到定義等,。Eric Elliott 在他的文章“關(guān)于靜態(tài)類型的令人震驚的秘密”中不同意,。 Daniel C Wang 表示，使用靜態(tài)類型沒有任何壞的影響,，而且擁有測試驅(qū)動開發(fā)（TDD）和靜態(tài)類型是很好的,。盡管沒有共識，他們也應該減少應用程序中的錯誤數(shù)量,。

你也應該知道可以使用 Flow 在 React 中啟用類型檢查,。這是 Facebook 為 JavaScript 開發(fā)的靜態(tài)類型檢查器。Flow 也可以集成到 Vue 中,。

如果你在使用 TypeScript 編寫代碼,，你編寫的不再是標準 JavaScript。盡管TypeScript 在不斷增長,，但與整個 JavaScript 相比,，TypeScript 的用戶群仍然很小。存在一種風險,，就是你的方向錯誤,。由于 TypeScript（雖然不太可能）可能會伴隨著時間而消失。此外,，TypeScript 使得項目增加了很多學習方面的開銷,。你可以在 Eric Elliott 的“Angular 2 vs. React”的比較中閱讀更多關(guān)于這方面的內(nèi)容,。

更新：James Ravenscroft 在對本文的評論中寫道,，TypeScript 對 JSX 有一流的支持,。可以無縫地對組件進行類型檢查,。所以如果你喜歡 TypeScript 并且你想使用 React,，這應該不是個問題。

2.3 模板?—?JSX 還是 HTML

React 打破了長期以來的嘗試,。幾十年來,，開發(fā)人員始終嘗試將 UI 模板和內(nèi)聯(lián) Javascript 邏輯分開，但 JSX 將這些又混合在一起,。這可能聽起來很糟糕,，但是你應該聽Peter Hunt 的演講“ React：反思最佳實踐”（2013年10月）。他指出,，分離模板和邏輯僅僅是技術(shù)的分離,，而不是擔心。你應該構(gòu)建組件而不是模板,。組件是可重用的,、可組合的、可單元測試的,。

JSX 是一種類似 HTML 語法,，稍后將在 JavaScript 中進行編譯可選預處理程序。它有一些怪癖,。例如,，您需要使用 className 而不是 class，因為后者是 Javascript 中的受保護名稱,。JSX 對于開發(fā)來說是一個很大的優(yōu)勢,，因為你在一個地方擁有了所有的東西，并且代碼完成和編譯時檢查更好地工作,。當你在 JSX 中輸入拼寫錯誤時,，React 將無法編譯，并打印出發(fā)生錯字的行號,。如果是在 Angular 2上運行,，也會失敗。但并不會報錯（如果您使用AOT和Angular,，則這個參數(shù)可能無效）,。

JSX 意味著 React 中的所有內(nèi)容都是 Javascript，它用于 JSX 模板和邏輯,。Cory House 在2016年1月的文章中指出：“Angular 2繼續(xù)將'JS'放入HTML中,。React將'HTML'放入JS中?！?這是一件好事,，因為 Javascript 比 HTML 更強大,。

Angular 模板使用特殊的 Angular 語言（比如 ngIf 或 ngFor）來增強 HTML。雖然React 需要 JavaScript 的知識,，但 Angular 會迫使您學習 Angular 特有的語法,。

Vue 具有“單文件組件”。這似乎是關(guān)于分離問題的一種權(quán)衡,。模板,，腳本和樣式在一個文件中，但在三個不同的有序部分中,。這意味著您可以獲得語法高亮,，CSS 支持以及更容易使用預處理器（如 Jade 或 SCSS）。我在其他文章中已經(jīng)讀過,，JSX更易于調(diào)試,，因為 Vue 不會顯示錯誤的 HTML 語法錯誤。這不是真的,，因為 Vue 將 HTML 轉(zhuǎn)換為渲染函數(shù) ,，所以錯誤顯示沒有問題（感謝 Vinicius Reis 的評論和更正！）,。

注意：如果你喜歡 JSX 的想法并想在 Vue 中使用它,，你可以使用 babel-plugin-transform-vue-jsx。

2.4框架 VS 庫

Angular 是一個框架而不是一個庫,，因為它提供了關(guān)于如何構(gòu)建應用程序的強大意見,，以及開箱即用的更多功能。Angular 是一個“完整的解決方案”,，隨時為你提供愉快的開始,。不需要分析庫，路由解決方案等,，只需開始工作即可,。

另一方面，React 和 Vue 更加靈活,。他們的庫可以配對各種套餐（在 npm 上有很多React,，但 Vue 的套餐較少，因為它還很年輕）,。有了React,，你甚至可以將庫本身交換為 API 兼容的替代品，如 Inferno,。但是伴隨的很好的靈活性,，隨之而來的是更多的責任。對 React 沒有規(guī)則和有限的指導。每個項目都需要有關(guān)其架構(gòu)的決策,，可能更容易出現(xiàn)錯誤,。

另一方面，Angular 還有一堆令人困惑的構(gòu)建工具,，樣板，短褲和時間接收器需要處理,。如果使用起動器套件或樣板,，React 也是如此。他們自然是非常有幫助的,，但 React 可以直接使用,，這可能是你應該學習的方式。有時,，在 Javascript 環(huán)境中工作所需的各種工具被稱為“ Javascript 疲勞”,。 Eric Clemmons 有一篇關(guān)于它的文章，他這樣說：

“There are still a bunch of installed tools, you are not used to, when starting with the framework. These are generated but probably a lot of developers do not understand, what is happening under the hood?—?or it takes a lot of time for them to do.”

Vue似乎是三個框架中最干凈和最輕的框架,。 GitLab有關(guān)于其決定使用 Vue 的博客文章：

“Vue.js comes with the perfect balance of what it will do for you and what you need to do yourself.(…) Vue.js is always within reach, a sturdy, but flexible safety net ready to help you keep your programming efficient and your DOM-inflicted suffering to a minimum.”

他們喜歡簡單易用,，源代碼非常易讀，不需要任何文檔或外部庫,。一切都非常簡單,。 Vue.js“對任何東西都不做過多的假設和約束”。還有另一篇博客關(guān)于向Vue轉(zhuǎn)變來自 Pixeljets,。 React 在狀態(tài)的意識上,，向JS世界邁進了一大步，它很好的為很多人展示了真正的功能性編程,。由于 JSX 的限制 React 和 Vue 比較的一個缺點是將組建分割成更小的組件的問題,。這里是文章的引用：

“For me and my team the readability of code is important, but it is still very important that writing code is fun. It is not funny to create 6 components when you are implementing really simple calculator widget. In a lot of cases, it is also bad in terms of maintenance, modifications, or applying visual overhaul to some widget, because you need to jump around multiple files/functions and check each small chunk of HTML separately. Again, I am not suggesting to write monoliths?—?I suggest to use components instead of microcomponents for day-to-day development.”

Vue 的異議者和支持者，在 Hacker news 和 Reddit?上有很有趣的討論,。

2.5狀態(tài)管理和數(shù)據(jù)綁定

構(gòu)建用戶界面很困難,，因為處處都有狀態(tài)，隨著時間的推移數(shù)據(jù)變化會帶來復雜性,。定義狀態(tài)工作流程對于應用程序的增長和變得更加復雜時有很大的幫助,。對于有限的應用程序，這可能是沒有有必要的,，像 Vanilla JS 就足夠了,。

它是如何工作的？組件在任何時間點繪制 UI,。當數(shù)據(jù)發(fā)生變化時,，框架會重新渲染整個 UI 組件，所以顯示的數(shù)據(jù)始終是最新的,。我們可以將這個概念稱為“ UI 作為函數(shù)”,。

React 經(jīng)常與 Redux 捆綁使用,。 Redux 三個基本原則：

單一的來源
狀態(tài)是只讀的
通過函數(shù)更改

換句話說：完整應用程序的狀態(tài)存儲在單個存儲中的對象樹中。這有助于調(diào)試應用程序,，并且一些功能更容易實現(xiàn),。狀態(tài)是只讀的，只能通過動作來改變,，以避免競爭條件（它也有助于調(diào)試）,。編寫 Reducers 來指定狀態(tài)如何通過動作轉(zhuǎn)換。

大多數(shù)教程和樣板文件已經(jīng)集成了 Redux,，但是如果沒有它,，你也可以使用 React（并且根本不需要 Redux）。Redux 在代碼中引入了復雜性和相當強的約束條件,。如果你正在學習 React,，那么在你使用 Redux 之前，你應該考慮學習普通的 React,。你肯定應該閱讀 Dan Abramov 的“你可能不需要 Redux”,。

一些開發(fā)人員建議使用 Mobx 而不是 Redux。你可以把它看作是一個“自動 Redux”,，這使得一開始就更容易使用和理解,。如果你想看看，你應該從介紹開始,。你還可以閱讀 Robin 的 Redux 和 Mobx 之間的比較,。同一作者還提供有關(guān)從 Redux 移動到 Mobx 的信息。如果你想檢查其他 Flux 庫,，此列表非常有用,。如果你是來自 MVC 世界，你將需要閱讀 Mikhail Levkovsky 撰寫的文章“ Redux 中的思考（當你認識的所有人都是 MVC）”,。

Vue 可以使用 Redux,，但它提供 Vuex 作為自己的解決方案。

React 和 Angular 之間的巨大差異是單向與雙向綁定,。當 UI 元素（例如,，用戶輸入）被更新時，Angular 的雙向綁定改變模型狀態(tài),。React 只有一種方式：先更新模型,，然后呈現(xiàn) UI 元素。Angular 的方法在代碼中更干凈,，開發(fā)人員更容易實現(xiàn),。React 的方式可以獲得更好的數(shù)據(jù)概覽，因為數(shù)據(jù)只向一個方向流動（這使得調(diào)試更容易）。

這兩個概念都有其優(yōu)點和缺點,。你需要了解這些概念并確定它是否會影響您的框架決策,。文章“雙向數(shù)據(jù)綁定：Angular 2和 React”提供了一個很好的解釋。在這里你可以找到一些交互式代碼示例（3歲（啥意思...）,，僅適用于Angular 1和React....）,。最后但并非最不重要的一點，Vue 支持單向綁定和雙向綁定（默認為單向）,。

2.6其他編程概念

Angular包含依賴注入,，即一個對象將依賴項（服務端）提供給另一個對象（客戶端）的模式。這導致更多的靈活性和更干凈的代碼,。模型 - 視圖 - 控制器模式（MVC）將項目分為三個部分：模型,，視圖和控制器,。作為 MVC 框架的角度 MVC 開箱即用,，反應只有 V。所以你需要自己解決 M 和 C.

2.7靈活性和縮小到 microservices

你只需將JavaScript庫添加到源代碼中,，就可以可以使用 Vue 和 React,。由于使用了 TypeScript，Angular 就沒有這么方便了,。

我們現(xiàn)在更多地轉(zhuǎn)向 microservices 和 microapps,。 React 和 Vue 通過只選擇真正必需的東西，可以更多地控制應用程序的大小,。他們提供了更多的靈活性,，使用前應用程序的一部分從 SPA 轉(zhuǎn)移到 microservices。Angular 最好工作在 SPA ,，因為它可能太臃腫而無法用于 microservices,。

有些人對非 SPA 網(wǎng)站也使用 React（例如，對于復雜的表單或向?qū)В?。即?Facebook 使用 React 也不是為主頁面,，而是為特定的頁面和功能。

2.8大小和性能

所有功能都有另一面：Angular 非常臃腫,。gzip 文件大小為143k,，而 Vue 為23K，React 為43k,。React 和 Vue 都有一個虛擬 DOM,，它可以提高性能。如果您對此感興趣,，可以閱讀有關(guān)虛擬 DOM 和 DOM 之間的差異以及 react.js 中虛擬 DOM 的實際優(yōu)勢,。

為了檢查性能，我看了一下這個 js 框架基準。你可以自己下載并運行它,，或者查看交互式結(jié)果表,。在檢查結(jié)果之前，您應該知道,，框架在基準測試中作弊,。因此這種性能檢查不應該用于做出決定。

總結(jié)一下：Vue 具有很好的性能和最深的內(nèi)存分配,，但與特別慢或者快速的框架（如 Inferno ）相比,，所有這些框架都非常接近。再說一次：性能基準只能作為附注來考慮,，而不能作為判斷,。

2.9測試

Facebook 使用 Jest 來測試其 React 代碼。在Angular 2中有 Jasmine 作為測試框架,。Eric Elliott 的一篇文章中咆哮說 Jasmine “以數(shù)百種方式編寫測試和斷言,，需要仔細閱讀每一個以了解它在做什么”。輸出也很臃腫,，閱讀起來很費力,。Vue 缺乏測試指導，但尤雨溪在他的2017年預覽中寫道,，該團隊計劃在這方面開展工作,。他們推薦使用 Karma。 Vue 與 Jest一起工作,，并且還有 avoriaz 作為測試工具,。

2.10通用和原生應用

通用應用程序正在將應用程序引入網(wǎng)絡，到桌面以及 native 應用程序的世界,。React 和 Angular 都 native 本地開發(fā),。Angular 擁有 native 應用程序的 NativeScript （由 Telerik 支持）和混合應用程序的 Ionic Framework。使用 React,，你可以查看 react-native-renderer 來構(gòu)建跨平臺的 iOS 和 Android 應用程序,。許多應用程序（包括 Facebook ）都是用 react-native 構(gòu)建的。

Javascript 框架在客戶端上呈現(xiàn)頁面,。這對整體的用戶體驗和搜索引擎優(yōu)化是不利的,。服務器端的渲染是很好的一個解決辦法。所有這三個框架都有相關(guān)的庫來尋求幫助,。 React 有 next.js,，Vue 有 nuxt.js，Angular 有... .Angular Universal,。

2.11學習曲線

Angular 有一個陡峭的學習曲線,。它有全面的文檔,，但有時你可能會對它感到沮喪，因為事情比聽起來更困難,。即使你對 Javascript 有深入的理解,，你也需要了解該框架背后的內(nèi)容。安裝程序在開始時很神奇,，它提供了很多包含的軟件包和代碼,。這可能被視為一種負面情緒，因為隨著時間的推移,，你需要學習一個大型的,，預先存在的生態(tài)系統(tǒng)。另一方面,，在特定情況下它可能會很好,，因為它已經(jīng)替你做出了很多決定。對于 React,，你可能需要就第三方庫進行大量重大決策,。有16種不同的 flux 組合用來管理狀態(tài)。

Vue 很容易學習,。公司切換到 Vue 是因為它對初級開發(fā)人員來說更容易,。一位用戶表示,，他公司的 React 應用程序非常復雜,，以至于新開發(fā)人員無法跟上代碼。借助 Vue,，初級和高級開發(fā)人員之間的差距縮小了,，他們可以更輕松地進行協(xié)作，并減少 bug,、問題和開發(fā)時間,。

有些人聲稱他們在 React 中所做的事情在 Vue 中可以寫的更好。如果你是一位無經(jīng)驗的 Javascript 開發(fā)人員或者如果你在過去十年中主要使用 jQuery,，那么你應該考慮使用 Vue,。Vue 看起來更像是簡化的 Javascript，同時也引入了一些新的想法：組件,，事件驅(qū)動模型和單向數(shù)據(jù)流,，它的體積也很小。

同時,，Angular 和 React 有自己的做事方式,。他們可能會阻礙你，因為你需要調(diào)整你的做法,，讓事情順利進行,。這可能是一個不利因素,，因為你不夠靈活，而且學習曲線陡峭,。這也可能是一種好處,，因為你在學習技術(shù)時被迫學習正確的概念。借助 Vue,，你可以用老式的方式來完成這些事情,。這在開始時會更容易，但如果事情做得不好,，可能會長期成為問題,。

當涉及到調(diào)試時，React 和 Vue 的戲法減少了,。尋找錯誤更容易,，因為有更少的地方可以查看，堆棧跟蹤在它們自己的代碼和庫的代碼之間有更好的區(qū)別,。使用 React 的人員報告說,，他們永遠不必閱讀庫的源代碼。但是,，在調(diào)試 Angular 應用程序時,，通常需要調(diào)試 Angular 的內(nèi)部以了解基礎模型。從好的一面來看,，從 Angular 4開始,，錯誤信息應該更清晰，更具信息性,。

2.12Angular,，React 和 Vue 的底層

你想自己檢查源代碼嗎？你想看看事情的感覺如何,？你可能首先要查看 Github 庫：React（github.com/facebook/react）,，Angular（github.com/angular/angular）和 Vue（github.com/vuejs/vue）

產(chǎn)品中看到的東西也是很好的，連同底層的源代碼,。TodoMVC 列出了幾十個用不同的 Javascript 框架編寫的相同的 Todo 應用程序,。你可以比較 Angular，React 和 Vue 解決方案,。RealWorld 創(chuàng)建了一個真實世界的應用程序,，并且他們已經(jīng)為 Angular（4+）和 React（使用Redux）準備好了解決方案。Vue 正在進行中,。