本人一直使用react，對于vue只是簡單學(xué)習(xí)過，對其了解不是很深。它們的區(qū)別也大多是來自網(wǎng)上各位牛人的見解。

1 如果你喜歡用模板搭建應(yīng)用（或者有這個想法），請選擇Vue

Vue應(yīng)用的默認(rèn)選項是把markup放在HTML文件中。數(shù)據(jù)綁定表達(dá)式采用的是和Angular相似的mustache語法，而指令（特殊的HTML屬性）用來向模板添加功能。舉例：

// HTML
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>
 // JS
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('');
        }
    }
});

2 相比之下，React應(yīng)用不使用模板，它要求開發(fā)者借助JSX在JavaScript中創(chuàng)建DOM。下面是用React實現(xiàn)的同樣的應(yīng)用：

// HTML
<div id="app"></div>
// JS (pre-transpilation)
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: 'Hello React.js!'
        };
    }
   reverseMessage() {
       this.setState({ 
           message: this.state.message.split('').reverse().join('') 
       });
    }
   render() {
       return (
           <div>
               <p>{this.state.message}</p>
               <button onClick={() => this.reverseMessage()}>
                   Reverse Message
               </button>
           </div>
       )
    }
}
ReactDOM.render(App, document.getElementById('app'));

• 對于來自標(biāo)準(zhǔn)Web開發(fā)方式的新開發(fā)者，模板更容易理解。但是一些資深開發(fā)者也喜歡模板，因為模板可以更好的把布局和功能分割開來，還可以使用Pug之類的模板引擎。
• 但是使用模板的代價是不得不學(xué)習(xí)所有的HTML擴展語法，而渲染函數(shù)只需要會標(biāo)準(zhǔn)的HTML和JavaScript。而且比起模板，渲染函數(shù)更加容易調(diào)試和測試。當(dāng)然你不應(yīng)該因為這方面的原因錯過Vue，因為在Vue2.0中提供了使用模板或者渲染函數(shù)的選項。

3 如果你喜歡簡單和“能用就行”的東西，請選擇Vue

一個簡單的Vue項目可以不需要轉(zhuǎn)譯直接運行在瀏覽器中，所以使用Vue可以像使用jQuery一樣簡單。當(dāng)然這對于React來說在技術(shù)上也是可行的，但是典型的React代碼是重度依賴于JSX和諸如class之類的ES6特性的。
<b>Vue的簡單在程序設(shè)計的時候體現(xiàn)更深，讓我們來比較一下兩個框架是怎樣處理應(yīng)用數(shù)據(jù)的（也就是state）。</b>

• React中的state是不可變（immutable）的，所以不能直接改變，需要使用API中的setState方法：
  this.setState({
  message: this.state.message.split('').reverse().join('')
  });
• Vue中的數(shù)據(jù)是可變（mutated）的，所以同樣的操作看起來更加簡潔。
  this.message = this.message.split('').reverse().join('');
  讓我們來看看Vue中是如何進(jìn)行狀態(tài)管理的。當(dāng)向state添加一個新對象的時候，Vue將遍歷其中的所有屬性并且轉(zhuǎn)換為getter，setter方法，現(xiàn)在Vue的響應(yīng)系統(tǒng)開始保持對state的跟蹤了，當(dāng)state中的內(nèi)容發(fā)生變化的時候就會自動重新渲染DOM。令人稱道的是，Vue中改變state的狀態(tài)的操作不僅更加簡潔，而且它的重新渲染系統(tǒng)也比React 的更快更有效率。

4. 如果你想要你的應(yīng)用盡可能的小和快，請選擇Vue

• 當(dāng)應(yīng)用程序的狀態(tài)改變時，React和Vue都將構(gòu)建一個虛擬DOM并同步到真實DOM中,Vue的渲染系統(tǒng)比React的更快。
• 但是，頁面大小是與所有項目有關(guān)的，這方面Vue再次領(lǐng)先，它目前的版本壓縮后只有25.6KB。React要實現(xiàn)同樣的功能，你需要React DOM（37.4KB）和React with Addon庫（11.4KB），共計44.8KB，幾乎是Vue的兩倍大。雙倍的體積并不能帶來雙倍的功能。

5 如果你打算構(gòu)建一個大型應(yīng)用程序，請選擇React。

• 像文章開頭那種同時用Vue和React實現(xiàn)的簡單應(yīng)用程序，可能會讓一個開發(fā)者潛意識中更加傾向于Vue。這是因為基于模板的應(yīng)用程序第一眼看上去更加好理解，而且能很快跑起來。但是這些好處引入的技術(shù)債會阻礙應(yīng)用擴展到更大的規(guī)模。模板容易出現(xiàn)很難注意到的運行時錯誤，同時也很難去測試，重構(gòu)和分解。
• 相比之下，Javascript模板可以組織成具有很好的分解性和干（DRY）代碼的組件，干代碼的可重用性和可測試性更好。Vue也有組件系統(tǒng)和渲染函數(shù)，但是React的渲染系統(tǒng)可配置性更強，還有諸如淺（shallow）渲染的特性，和React的測試工具結(jié)合起來使用，使代碼的可測試性和可維護(hù)性更好。

6 如果你想要一個同時適用于Web端和原生APP的框架，請選擇React

React Native是一個使用Javascript構(gòu)建移動端原生應(yīng)用程序iOS，Android的庫。 它與React相同，只是不使用Web組件，而是使用原生組件。 如果你學(xué)過React.js，很快就能上手react native，反之亦然。

7 如果你想要最大的生態(tài)系統(tǒng)，請選擇React

總結(jié)：

<b>Vue的優(yōu)勢是：</b>

• 模板和渲染函數(shù)的彈性選擇
• 簡單的語法和項目配置
• 更快的渲染速度和更小的體積

<b>React的優(yōu)勢是：</b>

• 更適合大型應(yīng)用和更好的可測試性
• Web端和移動端原生APP通吃
• 更大的生態(tài)系統(tǒng)，更多的支持和好用的工具

<b>React和Vue相似處：</b>

• 用虛擬DOM實現(xiàn)快速渲染
• 輕量級
• 響應(yīng)式組件
• 服務(wù)端渲染
• 集成路由工具，打包工具，狀態(tài)管理工具的難度低
• 優(yōu)秀的支持和社區(qū)