Vue與react的擇決

若是你喜歡用模板搭建應用（或者有這個想法），請選擇Vue

Vue應用的默認選項是把markup放在HTML文件中。數據綁定表達式採用的是和Angular類似的mustache語法，而指令（特殊的HTML屬性）用來向模板添加功能。

下面的示例是一個簡單的Vue應用。它會展現message和一個用來reverse message的按鈕：

// 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('');
    }
  }
});

相比之下，React應用不使用模板，它要求開發者藉助JSX在JavaScript中建立DOM。下面是用React實現的一樣的應用：

// 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'));

對於來自標準Web開發方式的新開發者，模板更容易理解。可是一些資深開發者也喜歡模板，由於模板能夠更好的把佈局和功能分割開來，還可使用Pug之類的模板引擎。

可是使用模板的代價是不得不學習全部的HTML擴展語法，而渲染函數只須要會標準的HTML和JavaScript。並且比起模板，渲染函數更加容易調試和測試。固然你不該該由於這方面的緣由錯過Vue，由於在Vue2.0中提供了使用模板或者渲染函數的選項。

若是你喜歡簡單和「能用就行」的東西，請選擇Vue

一個簡單的Vue項目能夠不須要轉譯直接運行在瀏覽器中，因此使用Vue能夠像使用jQuery同樣簡單。固然這對於React來講在技術上也是可行的，可是典型的React代碼是重度依賴於JSX和諸如class之類的ES6特性的。

Vue的簡單在程序設計的時候體現更深，讓咱們來比較一下兩個框架是怎樣處理應用數據的（也就是state）。

React中的state是不可變（immutable）的，因此不能直接改變，須要使用API中的setState方法：

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

React中是經過比較當前state和前一個state來決定什麼時候在DOM中進行重渲染以及渲染的內容，所以須要不可變（immutable）的state。

Vue中的數據是可變（mutated）的，因此一樣的操做看起來更加簡潔。

// Note that data properties are available as properties of 
// the Vue instance
this.message = this.message.split('').reverse().join('');

讓咱們來看看Vue中是如何進行狀態管理的。當向state添加一個新對象的時候，Vue將遍歷其中的全部屬性而且轉換爲getter，setter方法，如今Vue的響應系統開始保持對state的跟蹤了，當state中的內容發生變化的時候就會自動從新渲染DOM。使人稱道的是，Vue中改變state的狀態的操做不只更加簡潔，並且它的從新渲染系統也比React 的更快更有效率。

Vue的響應系統還有有些坑的，例如：它不能檢測屬性的添加和刪除和某些數組更改。這時候就要用到Vue API中的相似於React的set方法來解決。

若是你想要你的應用盡量的小和快，請選擇Vue

當應用程序的狀態改變時，React和Vue都將構建一個虛擬DOM並同步到真實DOM中。 二者都有各自的方法優化這個過程。

Vue核心開發者提供了一個benchmark測試，能夠看出Vue的渲染系統比React的更快。測試方法是10000個項目的列表渲染100次，結果以下圖。

 

從實用的觀點來看，這種benchmark只和邊緣狀況有關，大部分應用程序中不會常常進行這種操做，因此這不該該被視爲一個重要的比較點。可是，頁面大小是與全部項目有關的，這方面Vue再次領先，它目前的版本壓縮後只有25.6KB。React要實現一樣的功能，你須要React DOM（37.4KB）和React with Addon庫（11.4KB），共計44.8KB，幾乎是Vue的兩倍大。雙倍的體積並不能帶來雙倍的功能。

若是你打算構建一個大型應用程序，請選擇React

像文章開頭那種同時用Vue和React實現的簡單應用程序，可能會讓一個開發者潛意識中更加傾向於Vue。這是由於基於模板的應用程序第一眼看上去更加好理解，並且能很快跑起來。可是這些好處引入的技術債會阻礙應用擴展到更大的規模。模板容易出現很難注意到的運行時錯誤，同時也很難去測試，重構和分解。

相比之下，Javascript模板能夠組織成具備很好的分解性和幹（DRY）代碼的組件，幹代碼的可重用性和可測試性更好。Vue也有組件系統和渲染函數，可是React的渲染系統可配置性更強，還有諸如淺（shallow）渲染的特性，和React的測試工具結合起來使用，使代碼的可測試性和可維護性更好。

與此同時，React的immutable應用狀態可能寫起來不夠簡潔，但它在大型應用中意義非凡，由於透明度和可測試性在大型項目中變得相當重要。

若是你想要一個同時適用於Web端和原生APP的框架，請選擇React

React Native是一個使用Javascript構建移動端原生應用程序（iOS，Android）的庫。 它與React.js相同，只是不使用Web組件，而是使用原生組件。 若是你學過React.js，很快就能上手React Native，反之亦然。

// JS
import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native';  
class HelloWorld extends Component {   
  render() {     
    return (       
      <View>         
        <Text>Hello, React Native!</Text>
      </View>
    );   
  }
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

它的意義在於，開發者只須要一套知識和工具就能開發Web應用和移動端原生應用。若是你想同時作Web端開發和移動端開發，React爲你準備了一份大禮。

阿里的Weex也是一個跨平臺UI項目，目前它以Vue爲靈感，使用了許多相同的語法，同時計劃在將來徹底集成Vue，然而集成的時間和細節還不清楚。由於Vue將HTML模板做爲它設計的核心部分，而且現有特性不支持自定義渲染，所以很難看出目前的Vue.js的跨平臺能力能像React和React Native同樣強大。

若是你想要最大的生態系統，請選擇React

毫無疑問，React是目前最受歡迎的前端框架。它在NPM上每月的下載量超過了250萬次，相比之下，Vue是22.5萬次。

 

人氣不只僅是一個膚淺的數字，這意味着更多的文章，教程和更多Stack Overflow的解答，還意味有着更多的工具和插件能夠在項目中使用，讓開發者再也不孤立無援。

這兩個框架都是開源的，可是React誕生於Facebook，有Facebook背書，它的開發者和Facebook都承諾會持續維護React。相比之下，Vue是獨立開發者尤雨溪的做品。尤雨溪目前在全職維護Vue，也有一些公司資助Vue，可是規模和Facebook和Google沒得比。不過請對Vue的團隊放心，它的小規模和獨立性並無成爲劣勢，Vue有着固定的發佈週期，甚至更使人稱道的是，Github上Vue只有54個open issue，3456個closed issue，做爲對比，React有多達530個open issue，3447個closed issue。

若是你已經用其中一個用的很爽，就別變了

總結一下，咱們發現的，Vue的優點是：

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

React的優點是：

• 更適合大型應用和更好的可測試性
• Web端和移動端原生APP通吃
• 更大的生態系統，更多的支持和好用的工具

然而，React和Vue都是很優秀的框架，它們之間的類似之處多過不一樣之處，而且大部分的優秀功能是相通的：

• 用虛擬DOM實現快速渲染
• 輕量級
• 響應式組件
• 服務端渲染
• 集成路由工具，打包工具，狀態管理工具的難度低
• 優秀的支持和社區