React 和 Vue 有許多相似之處，它們都有：
使用 Virtual DOM
提供了響應式 (Reactive) 群組件化 (Composable) 的視圖元件。
将注意力集中保持在核心庫，而将其他功能如路由和全局狀态管理交給相關的庫。
由于有着衆多的相似處，我們會用更多的時間在這一塊進行比較。這裡我們不隻保證技術内容的準确性，同時也兼顧了平衡的考量。我們需要承認 React 比 Vue 更好的地方，比如更豐富的生态系統。
React與Vue存在很多相似之處，例如他們都是JavaScript的UI架構，專注于創造前端的富應用。不同于早期的JavaScript架構“功能齊全”，Reat與Vue隻有架構的骨架，其他的功能如路由、狀态管理等是架構分離的元件。
Vue.js(2.0版本)與React的其中最大一個相似之處，就是他們都使用了一種叫'Virtual DOM'的東西。所謂的Virtual
DOM基本上說就是它名字的意思：虛拟DOM，DOM樹的虛拟表現。它的誕生是基于這麼一個概念：改變真實的DOM狀态遠比改變一個JavaScript對象的花銷要大得多。
簡單來說，Virtual DOM是一個映射真實DOM的JavaScript對象，如果需要改變任何元素的狀态，那麼是先在Virtual
DOM上進行改變，而不是直接改變真實的DOM。當有變化産生時，一個新的Virtual DOM對象會被建立并計算新舊Virtual
DOM之間的差别。之後這些差别會應用在真實的DOM上。
例子如下，我們可以看看下面這個清單在HTML中的代碼是如何寫的：
而在JavaScript中，我們可以用對象簡單地創造一個針對上面例子的映射：
真實的Virtual
DOM會比上面的例子更複雜，但它本質上是一個嵌套着數組的原生對象。當新一項被加進去這個JavaScript對象時，一個函數會計算新舊Virtual
DOM之間的差異并反應在真實的DOM上。計算差異的算法是高性能架構的秘密所在，React和Vue在實作上有點不同。
正如上面你看到的例子中，HTML, JavaScript和CSS都寫在一個檔案之中，你不再需要在.vue元件檔案中引入CSS。
而在React文法中，JavaScript與JSX被寫入同一個元件檔案中。
在上面兩個例子中，我們可以看到React和Vue都有'props'的概念，這是properties的簡寫。props在元件中是一個特殊的屬性，允許父元件往子元件傳送資料。
上面的JSX庫組中，index, key, details, orders 與 addToOrder都是props，資料會被下傳到子元件PastaItem中去。
在React中，這是必須的，它依賴一個“單一資料源”作為它的“狀态”。而在Vue中，props略有不同。它們一樣是在元件中被定義，但Vue依賴于模闆文法，你可以通過模闆的循環函數更高效地展示傳入的資料。
事實上說，兩個工具都非常好用，都能為你建立一個好環境。而且如果可以不配置Webpack的話，我和Jeff認為這是天大的好事。
React和Vue都有很好的Chrome擴充工具去幫助你找出bug。它們會檢查你的應用，讓你看到Vue或者React中的變化。你也可以看到應用中的狀态，并實時看到更新。
Vue與React最後一個相似但略有不同之處是它們配套架構的處理方法。相同之處在于，兩個架構都專注于UI層，其他的功能如路由、狀态管理等都交由同伴架構進行處理。
React與Vue最大的不同是模闆的編寫。Vue鼓勵你去寫近似正常HTML的模闆。寫起來很接近标準HTML元素，隻是多了一些屬性。
Vue鼓勵你去使用HTML模闆去進行渲染，使用相似于Angular風格的方法去輸出動态的内容。是以，通過把原有的模闆整合成新的Vue模闆，Vue很容易提供舊的應用的更新。這也讓新來者很容易适應它的文法。
React/JSX乍看之下，覺得非常啰嗦，但使用JavaScript而不是模闆來開發，賦予了開發者許多程式設計能力。
如果你對React熟悉，你就會知道應用中的狀态是（React）關鍵的概念。也有一些配套架構被設計為管理一個大的state對象，如Redux。此外，state對象在React應用中是不可變的，意味着它不能被直接改變，在React中你需要使用setState()方法去更新狀态。
在Vue中，state對象并不是必須的，資料由data屬性在Vue對象中進行管理。
而在Vue中，則不需要使用如setState()之類的方法去改變它的狀态，在Vue對象中，data參數就是應用中資料的儲存者。
Vue 的一些文法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因為 AngularJS 是 Vue 早期開發的靈感來源。然而，AngularJS 中存在的許多問題，在 Vue 中已經得到解決。
1，MVVM（Model）(View)(View-model)
2，子產品化（Module）控制器（Contoller）依賴注入：
3，雙向資料綁定：界面的操作能實時反映到資料，資料的變更能實時展現到界面。
4，指令(ng-click ng-model ng-href ng-src ng-if...)
5，服務Service($compile $filter $interval $timeout $http...)
其中雙向資料綁定的實作使用了$scope變量的髒值檢測，使用$scope.$watch（視圖到模型），$scope.$apply(模型到視圖)檢測，内部調用的都是digest，當然也可以直接調用$scope.$digest進行髒檢查。值得注意的是當資料變化十分頻繁時，髒檢測對浏覽器性能的消耗将會很大，官方注明的最大檢測髒值為2000個資料。
vue.js官網：是一套建構使用者界面的 漸進式架構。與其他重量級架構不同的是，Vue 采用自底向上增量開發的設計。Vue
的核心庫隻關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單檔案元件和 Vue
生态系統支援的庫開發的複雜單頁應用。
Vue.js 的目标是通過盡可能簡單的 API 實作響應的資料綁定群組合的視圖元件。
（1）子產品化，目前最熱的方式是在項目中直接使用ES6的子產品化，結合Webpack進行項目打包
（2）元件化，創造單個component字尾為.vue的檔案，包含template(html代碼)，script(es6代碼),style(css樣式)
（3）路由，
vue非常小巧，壓縮後min源碼為72.9kb，gzip壓縮後隻有25.11kb，想比Angular為144kb，可以自駕搭配使用需要的庫插件，類似路由插件(Vue-router)，Ajax插件(vue-resource)等
下面從幾個方面來比較一下Vue.js和Angular.js的差別
Angular 事實上必須用 TypeScript 來開發，因為它的文檔和學習資源幾乎全部是面向 TS 的。TS 有很多顯而易見的好處 —— 靜态類型檢查在大規模的應用中非常有用，同時對于 Java 和 C# 背景的開發者也是非常提升開發效率的。
然而，并不是所有人都想用 TS —— 在中小型規模的項目中，引入 TS 可能并不會帶來太多明顯的優勢。在這些情況下，用 Vue 會是更好的選擇，因為在不用 TS 的情況下使用 Angular 會很有挑戰性。
最後，雖然 Vue 和 TS 的整合可能不如 Angular 那麼深入，我們也提供了官方的 類型聲明 和
元件裝飾器，并且知道有大量使用者在生産環境中使用 Vue + TS 的組合。我們也和微軟的 TS / VSCode 團隊進行着積極的合作，目标是為
Vue + TS 使用者提供更好的類型檢查和 IDE 開發體驗。
在大小方面，最近的 Angular 版本中在使用了 AOT 和 tree-shaking
技術後使得最終的代碼體積減小了許多。但即使如此，一個包含了 Vuex + Vue Router 的 Vue 項目 (30kb gzipped)
相比使用了這些優化的 angular-cli 生成的預設項目尺寸 (~130kb) 還是要小的多。
靈活性
Vue 相比于 Angular 更加靈活，Vue 官方提供了建構工具來協助你建構項目，但它并不限制你去如何組織你的應用代碼。有人可能喜歡有嚴格的代碼組織規範，但也有開發者喜歡更靈活自由的方式。
學習曲線
要學習 Vue，你隻需要有良好的 HTML 和 JavaScript 基礎。有了這些基本的技能，你就可以非常快速地通過閱讀 指南 投入開發。
Angular 的學習曲線是非常陡峭的 —— 作為一個架構，它的 API 面積比起 Vue
要大得多，你也是以需要了解更多的概念才能開始有效率地工作。當然，Angular
本身的複雜度是因為它的設計目标就是隻針對大型的複雜應用；但不可否認的是，這也使得它對于經驗不甚豐富的開發者相當的不友好。
不過就算有這麼多好處，但是相比Angular2，Vue還是有很多的不足：
作者：曹之忽
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
Angular2原生Form支援：
Angular2原生的Form子產品功能相當強大。除了雙向綁定之類的基本功能，還能通過programatic API
控制dom元素的表單行為。也有成型API提供自定義validator。這一點Vue隻有v-model和第三方庫。對于背景之類的重表單應用，還是Ng2有優勢。
依賴注入無論你喜不喜歡DI，這就是Angular2的強大功能之一。有DI可以在不改變代碼結構的情況下完成功能替換。（如，在desktop和mobile有不同功能，可以通過注入不同service實作，而共用相同的template和directive）。Vue則需要程式員自己規劃代碼組織，用來支援共享元件。DI也可以用于類似module
local state的功能。比如，一個視訊播放控件有幾個子元件完成，子元件需要分享一個狀态。這一點Angular2有原生的service
injection pattern。而Vue則沒有官方推薦。
對标準向後相容Angular2在一些細節上對标準有更好的支援。比如 list differ 算法中 Angular2
可以支援實作了Symbol.iterator的對象，而Vue隻能支援Array。對Observable和Promise，Angular2在應用的各個地方，甚至模闆級别都有支援(async
pipe)。而Vue需要vue-rx等第三方庫支援。Angular2的元件有shadow dom的實作可以選擇，而Vue目前還沒有。
測試Angular2一開始就設計好了如何對元件進行測試，而Vue元件雖然也很好寫測試，但是沒有官方推薦的唯一标準（當然，對視圖是否需要測試還有待探讨）。除此以外，Angular2還有一些小功能比如檢驗模闆的類型安全（即，模闆裡能在編譯器保證沒有引用model未定義的變量），不過AoT本身似乎還沒有穩定，是以不能算優勢。對TS的支援也是Angular好，當然前提是你喜歡TS。
Ember 是一個全能架構。它提供了大量的約定，一旦你熟悉了它們，開發會變得很高效。不過，這也意味着學習曲線較高，而且并不靈活。這意味着在架構和庫 (加上一系列松散耦合的工具) 之間做權衡選擇。後者會更自由，但是也要求你做更多架構上的決定。
也就是說，我們最好比較的是 Vue 核心和 Ember 的模闆與資料模型層：
Vue 在普通 JavaScript 對象上建立響應，提供自動化的計算屬性。在 Ember 中需要将所有東西放在 Ember 對象内，并且手工為計算屬性聲明依賴。
Vue 的模闆文法可以用全功能的 JavaScript 表達式，而 Handlebars 的文法和幫助函數相比來說非常受限。
在性能上，Vue 比 Ember 好很多，即使是 Ember 2.x 的最新 Glimmer 引擎。Vue 能夠自動批量更新，而Ember 在關鍵性能場景時需要手動管理。
随着時間的推移，Knockout 的發展已有所放緩，并且略顯有點老舊了。比如，它的元件系統缺少完備的生命周期事件方法，盡管這些在現在是非常常見的。以及相比于 Vue 調用子元件的接口它的方法顯得有點笨重。
如果你有興趣研究，你還會發現二者在接口設計的理念上是不同的。這可以通過各自建立的 simple Todo List 展現出來。或許有點主觀，但是很多人認為 Vue 的 API 接口更簡單結構更優雅。
Polymer 是另一個由谷歌贊助的項目，事實上也是 Vue 的一個靈感來源。Vue 的元件可以粗略的類比于 Polymer
的自定義元素，并且兩者具有相似的開發風格。最大的不同之處在于，Polymer 是基于最新版的 Web Components
标準之上，并且需要重量級的 polyfills 來幫助工作 (性能下降)，浏覽器本身并不支援這些功能。相比而言，Vue 在支援到 IE9
的情況下并不需要依賴 polyfills 來工作。
在 Polymer 1.0 版本中，為了彌補性能，團隊非常有限的使用資料綁定系統。例如，在 Polymer 中唯一支援的表達式隻有布爾值否定和單一的方法調用，它的 computed 方法的實作也并不是很靈活。
Polymer 自定義的元素是用 HTML 檔案來建立的，這會限制使用 JavaScript/CSS (和被現代浏覽器普遍支援的語言特性)。相比之下，Vue 的單檔案元件允許你非常容易的使用 ES2015 和你想用的 CSS 預編譯處理器。
在部署生産環境時，Polymer 建議使用 HTML Imports 加載所有資源。而這要求伺服器和用戶端都支援 Http 2.0
協定，并且浏覽器實作了此标準。這是否可行就取決于你的目标使用者和部署環境了。如果狀況不佳，你必須用 Vulcanizer 工具來打包
Polymer 元素。而在這方面，Vue 可以結合異步元件的特性和 Webpack 的代碼分割特性來實作懶加載
(lazy-loaded)。這同時確定了對舊浏覽器的相容且又能更快加載。
而 Vue 和 Web Component 标準進行深層次的整合也是完全可行的，比如使用 Custom Elements、Shadow DOM 的樣式封裝。然而在我們做出嚴肅的實作承諾之前，我們目前仍在等待相關标準成熟，進而再廣泛應用于主流的浏覽器中。
Riot 2.0 提供了一個類似于基于元件的開發模型 (在 Riot 中稱之為 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在設計理念上可能有許多相似處。盡管相比 Riot ，Vue 要顯得重一點，Vue 還是有很多顯著優勢的：
過渡效果系統。Riot 現在還沒有提供。
功能更加強大的路由機制，Riot 的路由功能的 API 是極少的。
更好的性能。Riot 使用了 周遊 DOM 樹 而不是虛拟 DOM，但實際上用的還是髒檢查機制，是以和 AngularJS患有相同的性能問題。
更多成熟工具的支援。Vue 提供官方支援 webpack 和 Browserify，而 Riot 是依靠社群來建立內建系統。
本文作者：code-xzh
來源：51CTO