Vue、React和Angular

React
React 和 Vue 有許多相似之處，它們都有：
使用 Virtual DOM
提供了響應式（Reactive）和元件化（Composable）的檢視元件。
將注意力集中保持在核心庫，而將其他功能如路由和全域性狀態管理交給相關的庫。

由於有著眾多的相似處，我們會用更多的時間在這一塊進行比較。這裡我們不只保證技術內容的準確性，同時也兼顧了平衡的考量。我們需要承認 react 比 Vue 更好的地方，比如更豐富的生態系統。
React 社群為我們準確進行平衡的考量提供了非常積極的幫助，特別感謝來自 React 團隊的 Dan Abramov 。他非常慷慨的花費時間來貢獻專業知識來幫助我們完善這篇文件。
效能
React 和 Vue 在大部分常見場景下都能提供近似的效能。通常 Vue 會有少量優勢，因為 Vue 的 Virtual DOM 實現相對更為輕量一些。如果你對資料感興趣，可以參考這個專門測試渲染和更新效能的第三方跑分。注意這個跑分並不包含針對大量複雜元件樹的情況，因此只建議作為參考。
優化
在 React 應用中，當某個元件的狀態發生變化時，它會以該元件為根，重新渲染整個元件子樹。
如要避免不必要的子元件的重渲染，你需要在所有可能的地方使用 PureComponent
，或是手動實現 shouldComponentUpdate
方法。同時你可能會需要使用不可變的資料結構來使得你的元件更容易被優化。
然而，使用 PureComponent
和 shouldComponentUpdate
時，需要保證該元件的整個子樹的渲染輸出都是由該元件的 props 所決定的。如果不符合這個情況，那麼此類優化就會導致難以察覺的渲染結果不一致。這使得 React 中的元件優化伴隨著相當的心智負擔。
在 Vue 應用中，元件的依賴是在渲染過程中自動追蹤的，所以系統能精確知曉哪個元件確實需要被重渲染。你可以理解為每一個元件都已經自動獲得了 shouldComponentUpdate
，並且沒有上述的子樹問題限制。
Vue 的這個特點使得開發者不再需要考慮此類優化，從而能夠更好地專注於應用本身。
HTML & CSS
在 React 中，一切都是 JavaScript。不僅僅是 HTML 可以用 JSX 來表達，現在的潮流也越來越多地將 CSS 也納入到 javascript 中來處理。這類方案有其優點，但也存在一些不是每個開發者都能接受的取捨。
Vue 的整體思想是擁抱經典的 Web 技術，並在其上進行擴充套件。我們下面會詳細分析一下。
JSX vs Templates
在 React 中，所有的元件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 JavaScript 的一種語法糖。
JSX 說是手寫的渲染函式有下面這些優勢：
你可以使用完整的程式語言 JavaScript 功能來構建你的檢視頁面。比如你可以使用臨時變數、js 自帶的流程控制、以及直接引用當前 JS 作用域中的值等等。

開發工具對 JSX 的支援相比於現有可用的其他 Vue 模板還是比較先進的（比如，linting、型別檢查、編輯器的自動完成）。

事實上 Vue 也提供了渲染函式 ，甚至支援 JSX。然而，我們預設推薦的還是模板。任何合乎規範的 HTML 都是合法的 Vue 模板，這也帶來了一些特有的優勢：
對於很多習慣了 HTML 的開發者來說，模板比起 JSX 讀寫起來更自然。這裡當然有主觀偏好的成分，但如果這種區別會導致開發效率的提升，那麼它就有客觀的價值存在。

基於 HTML 的模板使得將已有的應用逐步遷移到 Vue 更為容易。

這也使得設計師和新人開發者更容易理解和參與到專案中。

你甚至可以使用其他模板前處理器，比如 Pug 來書寫 Vue 的模板。

有些開發者認為模板意味著需要學習額外的 DSL (Domain-Specific Language, 領域特定語言）才能進行開發 —— 我們認為這種區別是比較膚淺的。首先，JSX 並不是免費的 —— 它是基於 JS 之上的一套額外語法，因此也有它自己的學習成本。同時，正如同熟悉 JS 的人學習 JSX 會很容易一樣，熟悉 HTML 的人學習 Vue 的模板語法也是很容易的。最後，DSL 的存在使得我們可以讓開發者用更少的程式碼做更多的事，比如 v-on
的各種修飾符，在 JSX 中實現對應的功能會需要多得多的程式碼。
更抽象一點來看，我們可以把元件區分為兩類：一類是偏檢視表現的 (presentational)，一類則是偏邏輯的 (logical)。我們推薦在前者中使用模板，在後者中使用 JSX 或渲染函式。這兩類元件的比例會根據應用型別的不同有所變化，但整體來說我們發現表現類的元件遠遠多於邏輯類元件。
CSS 的元件作用域
除非你把元件分佈在多個檔案上 (例如 CSS Modules)，要不在 React 中作用域內的 CSS 就會產生警告。非常簡單的 CSS 還可以工作，但是稍微複雜點的，比如懸停狀態、媒體查詢、偽類選擇符等要麼通過沉重的依賴來重做要麼就直接不能用。
而 Vue 可以讓你在每個單檔案元件中完全訪問 CSS。

<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>

這個可選 scoped
屬性會自動新增一個唯一的屬性（比如 data-v-21e5b78
）為元件內 CSS 指定作用域，編譯的時候 .list-Container:hover
會被編譯成類似 .list-container[data-v-21e5b78]:hover
。
如果你已經熟悉 CSS Modules，Vue 單檔案元件也有 first-class 支援它。
最後，就像 HTML 一樣，你可以選擇自己偏愛的 CSS 前處理器（或後處理器）編寫 CSS，這些生態系統允許您利用現有的庫。這可以讓你圍繞設計為中心展開工作，比如您的構建過程中顏色操作，而不是引入專門的庫來增加你應用的體積和複雜度。
規模
向上擴充套件
Vue 和 React 都提供了強大的路由來應對大型應用。React 社群在狀態管理方面非常有創新精神（比如Flux、Redux），而這些狀態管理模式甚至 Redux 本身也可以非常容易的整合在 Vue 應用中。實際上，Vue 更進一步地採用了這種模式（Vuex），更加深入整合 Vue 的狀態管理解決方案 Vuex 相信能為你帶來更好的開發體驗。
兩者另一個重要差異是，Vue 的路由庫和狀態管理庫都是由官方維護支援且與核心庫同步更新的。React 則是選擇把這些問題交給社群維護，因此建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。
最後，Vue 提供了Vue-cli 腳手架，能讓你非常容易地構建專案，包含了 Webpack，Browserify，甚至 no build system。React 在這方面也提供了create-react-app，但是現在還存在一些侷限性：
它不允許在專案生成時進行任何配置，而 Vue 支援 Yeoman-like 定製。
它只提供一個構建單頁面應用的單一模板，而 Vue 提供了各種用途的模板。
它不能用使用者自建的模板構建專案，而自建模板對企業環境下預先建立協議是特別有用的。

而要注意的是這些限制是故意設計的，這有它的優勢。例如，如果你的專案需求非常簡單，你就不需要自定義生成過程。你能把它作為一個依賴來更新。如果閱讀更多關於不同的設計理念。
向下擴充套件
React 學習曲線陡峭，在你開始學 React 前，你需要知道 JSX 和 ES2015，因為許多示例用的是這些語法。你需要學習構建系統，雖然你在技術上可以用 Babel 來實時編譯程式碼，但是這並不推薦用於生產環境。
就像 Vue 向上擴充套件好比 React 一樣，Vue 向下擴充套件後就類似於 jQuery。你只要把如下標籤放到頁面就可以執行：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

然後你就可以編寫 Vue 程式碼並應用到生產中，你只要用 min 版 Vue 檔案替換掉就不用擔心其他的效能問題。
由於起步階段不需學 JSX，ES2015 以及構建系統，所以開發者只需不到一天的時間閱讀指南就可以建立簡單的應用程式。
本地渲染
React Native 能使你用相同的元件模型編寫有本地渲染能力的 APP（iOS 和 Android）。能同時跨多平臺開發，對開發者是非常棒的。相應地，Vue 和 Weex 會進行官方合作，Weex 是阿里的跨平臺使用者介面開發框架，Weex 的 JavaScript 框架執行時用的就是 Vue。這意味著在 Weex 的幫助下，你使用 Vue 語法開發的元件不僅僅可以執行在瀏覽器端，還能被用於開發 ios 和 android 上的原生應用。
在現在，Weex 還在積極發展，成熟度也不能和 react native 相抗衡。但是，Weex 的發展是由世界上最大的電子商務企業的需求在驅動，Vue 團隊也會和 Weex 團隊積極合作確保為開發者帶來良好的開發體驗。
MobX
Mobx 在 React 社群很流行，實際上在 Vue 也採用了幾乎相同的反應系統。在有限程度上，React + Mobx 也可以被認為是更繁瑣的 Vue，所以如果你習慣組合使用它們，那麼選擇 Vue 會更合理。
vue.js對比AngularJS (Angular 1)
Vue 的一些語法和 AngularJS 的很相似（例如 v-if
vs ng-if
）。因為 angularjs 是 Vue 早期開發的靈感來源。然而，AngularJS 中存在的許多問題，在 Vue 中已經得到解決。
複雜性
在 API 與設計兩方面上 Vue.js 都比 AngularJS 簡單得多，因此你可以快速地掌握它的全部特性並投入開發。
靈活性和模組化
Vue.js 是一個更加靈活開放的解決方案。它允許你以希望的方式組織應用程式，而不是在任何時候都必須遵循 AngularJS 制定的規則，這讓 Vue 能適用於各種專案。我們知道把決定權交給你是非常必要的。這也就是為什麼我們提供 webpack template，讓你可以用幾分鐘，去選擇是否啟用高階特性，比如熱模組載入、linting、CSS 提取等等。
資料繫結
AngularJS 使用雙向繫結，Vue 在不同元件間強制使用單向資料流。這使應用中的資料流更加清晰易懂。
指令與元件
在 Vue 中指令和元件分得更清晰。指令只封裝 DOM 操作，而元件代表一個自給自足的獨立單元 —— 有自己的檢視和資料邏輯。在 AngularJS 中兩者有不少相混的地方。
效能
Vue 有更好的效能，並且非常非常容易優化，因為它不使用髒檢查。
在 AngularJS 中，當 watcher 越來越多時會變得越來越慢，因為作用域內的每一次變化，所有 watcher 都要重新計算。並且，如果一些 watcher 觸發另一個更新，髒檢查迴圈（digest cycle）可能要執行多次。AngularJS 使用者常常要使用深奧的技術，以解決髒檢查迴圈的問題。有時沒有簡單的辦法來優化有大量 watcher 的作用域。
Vue 則根本沒有這個問題，因為它使用基於依賴追蹤的觀察系統並且非同步佇列更新，所有的資料變化都是獨立觸發，除非它們之間有明確的依賴關係。
有意思的是，Angular 和 Vue 用相似的設計解決了一些 AngularJS 中存在的問題。
Angular (原本的 Angular 2)
我們將新的 Angular 獨立開來討論，因為它是一個和 AngularJS 完全不同的框架。例如：它具有優秀的元件系統，並且許多實現已經完全重寫，API 也完全改變了。
TypeScript
Angular 事實上必須用 TypeScript 來開發，因為它的文件和學習資源幾乎全部是面向 TS 的。TS 有很多顯而易見的好處 —— 靜態型別檢查在大規模的應用中非常有用，同時對於 Java 和 C# 背景的開發者也是非常提升開發效率的。
然而，並不是所有人都想用 TS —— 在中小型規模的專案中，引入 TS 可能並不會帶來太多明顯的優勢。在這些情況下，用 Vue 會是更好的選擇，因為在不用 TS 的情況下使用 Angular 會很有挑戰性。
最後，雖然 Vue 和 TS 的整合可能不如 Angular 那麼深入，我們也提供了官方的 型別宣告 和 元件裝飾器，並且知道有大量使用者在生產環境中使用 Vue + TS 的組合。我們也和微軟的 TS / VSCode 團隊進行著積極的合作，目標是為 Vue + TS 使用者提供更好的型別檢查和 IDE 開發體驗。
大小和效能
在效能方面，這兩個框架都非常的快，我們也沒有足夠的實際應用資料來下一個結論。如果你一定想看些資料的話，你可以參考這個第三方跑分。單就這個跑分來看，Vue 似乎比 Angular 要更快一些。
在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking 技術後使得最終的程式碼體積減小了許多。但即使如此，一個包含了 vuex + vue-router 的 Vue 專案 (30kb gzipped) 相比使用了這些優化的 angular-cli
生成的預設專案尺寸 (~130kb) 還是要小的多。
靈活性
Vue 相比於 Angular 更加靈活，Vue 官方提供了構建工具來協助你構建專案，但它並不限制你去如何組織你的應用程式碼。有人可能喜歡有嚴格的程式碼組織規範，但也有開發者喜歡更靈活自由的方式。
學習曲線
要學習 Vue，你只需要有良好的 HTML 和 JavaScript 基礎。有了這些基本的技能，你就可以非常快速地通過閱讀 指南 投入開發。
Angular 的學習曲線是非常陡峭的 —— 作為一個框架，它的 API 面積比起 Vue 要大得多，你也因此需要理解更多的概念才能開始有效率地工作。當然，Angular 本身的複雜度是因為它的設計目標就是隻針對大型的複雜應用；但不可否認的是，這也使得它對於經驗不甚豐富的開發者相當的不友好。

文章轉載自：http://blog.csdn.net/huang_1012/article/details/76926974