React

React 和 Vue 有許多相似之處，它們都有：

• 使用 Virtual DOM
• 提供了響應式 (Reactive) 和元件化 (Composable) 的檢視元件。
• 將注意力集中保持在核心庫，而將其他功能如路由和全域性狀態管理交給相關的庫。

由於有著眾多的相似處，我們會用更多的時間在這一塊進行比較。這裡我們不只保證技術內容的準確性，同時也兼顧了平衡的考量。我們需要承認 React 比 Vue 更好的地方，比如更豐富的生態系統。

相似之處

React與Vue存在很多相似之處，例如他們都是JavaScript的UI框架，專注於創造前端的富應用。不同於早期的JavaScript框架“功能齊全”，Reat與Vue只有框架的骨架，其他的功能如路由、狀態管理等是框架分離的元件。

Virtual DOM

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中的程式碼是如何寫的：

<ul class="list">
  <li>item 1</li>
  <li>item 2</li>
</ul>

而在JavaScript中，我們可以用物件簡單地創造一個針對上面例子的對映：

{
    type: `ul`, 
    props: {`class`: `list`}, 
    children: [
        { type: `li`, props: {}, children: [`item 1`] },
        { type: `li`, props: {}, children: [`item 2`] }
    ]
}

真實的Virtual DOM會比上面的例子更復雜，但它本質上是一個巢狀著陣列的原生物件。當新一項被加進去這個JavaScript物件時，一個函式會計算新舊Virtual DOM之間的差異並反應在真實的DOM上。計算差異的演算法是高效能框架的祕密所在，React和Vue在實現上有點不同。

Vue宣稱可以更快地計算出Virtual DOM的差異，這是由於它在渲染過程中，會跟蹤每一個元件的依賴關係，不需要重新渲染整個元件樹。

而對於React而言，每當應用的狀態被改變時，全部子元件都會重新渲染。當然，這可以通過shouldComponentUpdate這個生命週期方法來進行控制，但Vue將此視為預設的優化。

元件化

React與Vue都鼓勵元件化應用。這本質上說，是建議你將你的應用分拆成一個個功能明確的模組，每個模組之間可以通過合適的方式互相聯絡。在Vue中，如果你遵守一定的規則，你可以使用單檔案元件.

//PastaItem.vue

<template>
<li class="pasta-dish list-unstyled">
    <div class="row">
        <div class="col-md-3">
            <img :src="this.item.image" :alt="this.item.name" />
        </div>
        <div class="col-md-9 text-left">
            <h3>{{this.item.name}}</h3>
            <p>
                {{this.item.desc}}
            </p>
            <button v-on:click="addToOrderNew" class="btn btn-primary">Add to order</button> <mark>{{this.orders}}</mark>
        </div>
    </div>
</li>
</template>

<script>

export default {
    name: `pasta-item`,
    props: [`item`],
    data:  function(){
        return{
            orders: 0
        }
    },
    methods: {
        addToOrderNew: function(y){
            this.orders += 1;
            this.$emit(`order`);
        }
    }
}

</script>

<style src="./Pasta.css"></style>

正如上面你看到的例子中，HTML, JavaScript和CSS都寫在一個檔案之中，你不再需要在.vue元件檔案中引入CSS。
而在React語法中，JavaScript與JSX被寫入同一個元件檔案中。

import React from "react";

class PastaItem extends React.Component {

    render() {
        const { details, index } = this.props;

        return (
            <li className="pasta-dish list-unstyled">
                <div className="row">
                    <div className="col-md-3">
                        <img src={details.image} alt={details.name} />
                    </div>
                    <div className="col-md-9 text-left">
                        <h3>{details.name}</h3>
                        <p>
                            {details.desc}
                        </p>
                        <button onClick={() => this.props.addToOrder(index)} className="btn btn-primary">Add to order</button> <mark>{this.props.orders || 0}</mark>
                    </div>
                </div>
            </li>
        );
    }
}

export default PastaItem;

Props

在上面兩個例子中，我們可以看到React和Vue都有`props`的概念，這是properties的簡寫。props在元件中是一個特殊的屬性，允許父元件往子元件傳送資料。

Object.keys(this.state.pastadishes).map(key =>
    <PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
)

上面的JSX庫組中，index, key, details, orders 與 addToOrder都是props，資料會被下傳到子元件PastaItem中去。

在React中，這是必須的，它依賴一個“單一資料來源”作為它的“狀態”。而在Vue中，props略有不同。它們一樣是在元件中被定義，但Vue依賴於模板語法，你可以通過模板的迴圈函式更高效地展示傳入的資料。

<pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>

構建工具

React和Vue都有自己的構建工具，你可以使用它快速搭建開發環境。React可以使用Create React App (CRA)，而Vue對應的則是vue-cli。兩個工具都能讓你得到一個根據最佳實踐設定的專案模板。

由於CRA有很多選項，使用起來會稍微麻煩一點。這個工具會逼迫你使用Webpack和Babel。而vue-cli則有模板列表可選，能按需創造不同模板，使用起來更靈活一點。

事實上說，兩個工具都非常好用，都能為你建立一個好環境。而且如果可以不配置Webpack的話，我和Jeff認為這是天大的好事。

Chrome 開發工具

React和Vue都有很好的Chrome擴充套件工具去幫助你找出bug。它們會檢查你的應用，讓你看到Vue或者React中的變化。你也可以看到應用中的狀態，並實時看到更新。

React的開發工具:
https://cdn.deliciousbrains.com/content/uploads/2017/06/15151112/react-devtools.mp4

Vue的開發工具:
https://cdn.deliciousbrains.com/content/uploads/2017/06/15151111/vue-devtools.mp4

主要區別

Vue與React最後一個相似但略有不同之處是它們配套框架的處理方法。相同之處在於，兩個框架都專注於UI層，其他的功能如路由、狀態管理等都交由同伴框架進行處理。

而不同之處是在於它們如何關聯它們各自的配套框架。Vue的核心團隊維護著vue-router和vuex，它們都是作為官方推薦的存在。而React的react-router和react-redux則是由社群成員維護，它們都不是官方維護的。

模板 vs JSX

React與Vue最大的不同是模板的編寫。Vue鼓勵你去寫近似常規HTML的模板。寫起來很接近標準HTML元素，只是多了一些屬性。

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>

這些屬性也可以被使用在單檔案元件中，儘管它需要在在構建時將元件轉換為合法的JavaScript和HTML。

<ul>
  <pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>
</ul>

Vue鼓勵你去使用HTML模板去進行渲染，使用相似於Angular風格的方法去輸出動態的內容。因此，通過把原有的模板整合成新的Vue模板，Vue很容易提供舊的應用的升級。這也讓新來者很容易適應它的語法。

React推薦你所有的模板通用JavaScript的語法擴充套件——JSX書寫，不過這對於傳統的前端開發人員需要相應的學習。同樣的程式碼，用JSX書寫的例子如下：

<ul className="pasta-list">
    {
        Object.keys(this.state.pastadishes).map(key =>
            <PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
        )
    }
</ul>

React/JSX乍看之下，覺得非常囉嗦，但使用JavaScript而不是模板來開發，賦予了開發者許多程式設計能力。

狀態管理 vs 物件屬性

如果你對React熟悉，你就會知道應用中的狀態是（React）關鍵的概念。也有一些配套框架被設計為管理一個大的state物件，如Redux。此外，state物件在React應用中是不可變的，意味著它不能被直接改變，在React中你需要使用setState()方法去更新狀態。

 addToOrder(key) {
        //Make a copy of this.state
        const orders = { ...this.state.orders };

        //update or add
        orders[ key ] = orders[ key ] + 1 || 1;
        this.setState( { orders } );
 }

在Vue中，state物件並不是必須的，資料由data屬性在Vue物件中進行管理。

export default {
  name: `app`,
  data() {
    return {
      samplePasta: samplePasta,
      orders: {}
    }
  },
...
  methods: {
    handleOrder: function (key) {

      if (!this.orders.hasOwnProperty(key)) {
        this.$set(this.orders, key, { count: 0 });
      }

      this.orders[key].count += 1;
    }
  }
}

而在Vue中，則不需要使用如setState()之類的方法去改變它的狀態，在Vue物件中，data引數就是應用中資料的儲存者。

不過噁心的是React出了一個霸王條款：Facebook拒修改React開源許可

Angularjs

Vue 的一些語法和 AngularJS 的很相似 (例如 v-if vs ng-if)。因為 AngularJS 是 Vue 早期開發的靈感來源。然而，AngularJS 中存在的許多問題，在 Vue 中已經得到解決。

Angular

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

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的區別

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 本身的複雜度是因為它的設計目標就是隻針對大型的複雜應用；但不可否認的是，這也使得它對於經驗不甚豐富的開發者相當的不友好。

不過就算有這麼多好處，但是相比Angular2，Vue還是有很多的不足：

1. Angular2原生Form支援： Angular2原生的Form模組功能相當強大。除了雙向繫結之類的基本功能，還能通過programatic API 控制dom元素的表單行為。也有成型API提供自定義validator。這一點Vue只有v-model和第三方庫。對於後臺之類的重表單應用，還是Ng2有優勢。
2. 依賴注入無論你喜不喜歡DI，這就是Angular2的強大功能之一。有DI可以在不改變程式碼結構的情況下完成功能替換。（如，在desktop和mobile有不同功能，可以通過注入不同service實現，而共用相同的template和directive）。Vue則需要程式設計師自己規劃程式碼組織，用來支援共享元件。DI也可以用於類似module local state的功能。比如，一個視訊播放控制元件有幾個子元件完成，子元件需要分享一個狀態。這一點Angular2有原生的service injection pattern。而Vue則沒有官方推薦。
3. 對標準向後相容Angular2在一些細節上對標準有更好的支援。比如 list differ 演算法中 Angular2 可以支援實現了Symbol.iterator的物件，而Vue只能支援Array。對Observable和Promise，Angular2在應用的各個地方，甚至模板級別都有支援(async pipe)。而Vue需要vue-rx等第三方庫支援。Angular2的元件有shadow dom的實現可以選擇，而Vue目前還沒有。
4. 測試Angular2一開始就設計好了如何對元件進行測試，而Vue元件雖然也很好寫測試，但是沒有官方推薦的唯一標準（當然，對檢視是否需要測試還有待探討）。除此以外，Angular2還有一些小功能比如檢驗模板的型別安全（即，模板裡能在編譯器保證沒有引用model未定義的變數），不過AoT本身似乎還沒有穩定，所以不能算優勢。對TS的支援也是Angular好，當然前提是你喜歡TS。

Ember

Ember 是一個全能框架。它提供了大量的約定，一旦你熟悉了它們，開發會變得很高效。不過，這也意味著學習曲線較高，而且並不靈活。這意味著在框架和庫 (加上一系列鬆散耦合的工具) 之間做權衡選擇。後者會更自由，但是也要求你做更多架構上的決定。
也就是說，我們最好比較的是 Vue 核心和 Ember 的模板與資料模型層：

• Vue 在普通 JavaScript 物件上建立響應，提供自動化的計算屬性。在 Ember 中需要將所有東西放在 Ember
  物件內，並且手工為計算屬性宣告依賴。
• Vue 的模板語法可以用全功能的 JavaScript 表示式，而 Handlebars 的語法和幫助函式相比來說非常受限。
• 在效能上，Vue 比 Ember 好很多，即使是 Ember 2.x 的最新 Glimmer 引擎。Vue 能夠自動批量更新，而Ember 在關鍵效能場景時需要手動管理。

Knockout

Knockout 是 MVVM 領域內的先驅，並且追蹤依賴。它的響應系統和 Vue 也很相似。它在瀏覽器支援以及其他方面的表現也是讓人印象深刻的。它最低能支援到 IE6，而 Vue 最低只能支援到 IE9。
隨著時間的推移，Knockout 的發展已有所放緩，並且略顯有點老舊了。比如，它的元件系統缺少完備的生命週期事件方法，儘管這些在現在是非常常見的。以及相比於 Vue 呼叫子元件的介面它的方法顯得有點笨重。
如果你有興趣研究，你還會發現二者在介面設計的理念上是不同的。這可以通過各自建立的 simple Todo List 體現出來。或許有點主觀，但是很多人認為 Vue 的 API 介面更簡單結構更優雅。

Polymer

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

Riot 2.0 提供了一個類似於基於元件的開發模型 (在 Riot 中稱之為 Tag)，它提供了小巧精美的 API。Riot 和 Vue 在設計理念上可能有許多相似處。儘管相比 Riot ，Vue 要顯得重一點，Vue 還是有很多顯著優勢的：

• 過渡效果系統。Riot 現在還沒有提供。
• 功能更加強大的路由機制，Riot 的路由功能的 API 是極少的。
• 更好的效能。Riot 使用了 遍歷 DOM 樹 而不是虛擬 DOM，但實際上用的還是髒檢查機制，因此和 AngularJS患有相同的效能問題。
• 更多成熟工具的支援。Vue 提供官方支援 webpack 和 Browserify，而 Riot 是依靠社群來建立整合系統。