2016年react鞏固了它作為前端架構之王的地位，這一年中可以看到它在web端和移動端的快速成長，同時穩穩領先于它的主要競争對手angular。
但是2016對vue來說也是同樣令人印象深刻的一年，它釋出了vue 2.0版本并且在javascript社群引起了巨大反響，github上多出的25000顆star就是最好的證明。
react和vue的适用範圍無疑是很相似的：同樣是基于元件的輕量級架構，同樣專注于使用者界面的視圖層。同樣可以用在簡單的項目中，也同樣可以使用全家桶擴充為複雜的應用程式。
因為，很多web開發者想知道他們應該使用哪個架構。是其中一個明顯優于另一個？還是他們有各自的優點和坑？或者他們基本就是一個樣？
兩個架構 兩個擁護者
為了平衡我的偏見，我叫上了我的朋友alexis mangin，他是一個很牛的javascript開發者，同時也是一個react鐵粉。他同樣沉浸于react中，經常在web端和移動端的項目中使用。
有一天alexis問我：“為什麼你這麼中意vue，而不是react呢？”那時候我不太了解react， 沒辦法給出一個好的答案。是以我出了一個主意，找一天時間，帶上筆記本電腦，互相介紹一下彼此做出選擇的原因。
經過大量的讨論和和互相學習後，我們找到了6個關鍵點。
如果你喜歡用模闆搭建應用（或者有這個想法），請選擇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實作的同樣的應用：
<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，反之亦然。
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實作快速渲染
輕量級
響應式元件
服務端渲染
內建路由工具，打包工具，狀态管理工具的難度低
優秀的支援和社群
如果你覺得我們有所遺漏的話歡迎在評論中指出。
作者：松子
來源：51cto