Vue.js 是一個用於創建 web ui 的 JavaScript 庫。結合其他的一些工具，它也可以成為一個“框架”。通過我們的上一篇博客，想必你已經知道 Vue.js 是頂級框架之一，並且在很多場景下已經替換了 Angular 和 React。這就引出了本文要討論的話題：‘Vue.js 很好，但是比 Angular 或 React 更好嗎？’。
如果你之前從來沒有聽說過或使用過 Vue.js，那么你可能會想：我去，又一個 JavaScript 框架！行，朕知道了。但是，Vue.js 已經不是一個“新” 框架了。Vue.js 在 2013 年首次發布，現在在 GitHub 上已經有 59600 顆星了，而且也有大量的下載。我們來看看下面這幾張圖：
因此，和其他同類框架相比，Vue.js 早已不是新秀了，但是流行度卻並不低。現在讓我們看看 Vue.js 的優勢有哪些。
Vue.js 為什么比較特別？
Vue 最大的優勢在於純正的血統。它是一個全新的框架，幾乎沒有任何歷史包袱。它從 React 和 Angular 吸取了失敗的教訓、學習了成功的經驗。正如我們看到的那樣，Vue 很輕量，而且易於學習。
它有一些非常基礎的文檔，但是已經做的不錯了，而且和 angular 相比並沒有太多要學的東西——這是件好事，因為它看上去很強大。PageKit、Python China 是使用了 Vue 的兩個項目。這里有一個列表（譯者注：列表在哪兒呢？給我一個完美的解釋）。而且，它還有類似於 Angular 的雙向數據綁定、類似於 React 的虛擬 DOM。
現在，我們希望你對於 Vue.js 的基礎概念已經有了一個清晰的了解。接下來，就讓我們拿它和 Angular、React 比較一下。我們先從 Angular 開刀。
Angularjs vs Vue.js
在比較之前，讓我們先聲明一下，Angular (主要是 Angular2 發布之后的版本！！) 就好比一頭猛獁象，Vue.js 就好比一只飢渴難耐但是馬上就要長大的老虎。但是，對於開發者來說，有很多原因促使他們由 Angular 轉向 Vue。Vue 的作者 Even You 對原因給出了合理的解釋：
Vue.js 是一個更加靈活的、（相對於 Angular）並不那么“專制”的解決方案。這允許你按照自己的想法來構建你的應用，而不是強制按照 Angular 規定的方式去做。它只是一個接口層，所以你可以將其作為頁面的一個功能來使用，而非一個完整的 SPA。
現在讓我們來看一些代碼，這樣就能夠使你有一些基本的認識（來源：fadeit.dk）。
Vue.js vs Angularjs 總結：
Angularjs 擁有很多工具，也有大量復雜的語法，以至於有時候會讓你感到困惑。另一方面，Vue.js 相對 Angular 要更加簡單，有時候甚至更好。如果你擔心這個框架的未來發展狀態，那么我們建議你完全沒必要擔心。這種趨勢會保持很長時間，而且在未來的兩年內不會有絲毫的減弱。但是，使用 Angularjs 開發仍然是個不錯的選擇。
Reactjs vs Vue.js
React 和 Vue.js 有一些相似的特征。如下：
1. 使用了虛擬 DOM
2. 提供了響應式、可組件化的視圖組件
3. 關注核心庫，像路由和全局狀態管理則交由其他庫來處理
相關閱讀：選擇 Facebook 的 ReactJS 的五大理由
這表明 React 和 Vue.js 在功能上是非常相似的。因此，我們將從開發者的視角通過一些簡單的代碼來對比這兩個框架。讓我們看看在這樣的對比中會發生什么：
- Hello World:
- React 實現：
<!DOCTYPE html>
<html>
<head>
<title>React Hello World</title>
<script src="https://fb.ms/react-15.0.0.js"></script>
<script src="https://fb.ms/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.34/browser.min.js"></script>
</head>
<body>
<div id="greeting"></div>
<script type="text/babel">
var Greeting = React.createClass({
render: function(){
return {
<p>Hello from React</p>
}
}
});
ReactDOM.reader(
<Greeting/>,
document.getElementById('greeting')
)
</script>
</body>
</html>
- Vue 實現：
<!DOCTYPE html>
<html>
<head>
<title>Vue Hello World</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:'#app',
data:{
message: 'Hello from Vue'
}
})
</script>
</body>
</html>
Vue 的實現很簡單。使用一個 script 標簽就可以運行了。優勢就是充分利用了 Vue 的特性，而不必學習新的技術。
- 雙向數據綁定
- React 實現：
//React.js(jsx)
var Message = React.createClass({
getInitialState(){
return {
message: ''
}
},
handleMessageChange(e){
this.setState({message:e.target.value});
},
render(){
return (
<div>
<input type="text" onChange=(this.handleMessageChange) />
<span>(this.state.message)</span>
<div/>
)
}
})
- Vue 實現：
var Message = new Vue({
el: '#message',
data:{
message: ''
}
});
<div id="message">
<input type="text" v-model="message" />
<span>{{message}}</span>
</div>
在 Vue.js 中使用 v-model 雙向數據綁定會變得很簡單，而使用 React 就比較麻煩了。
- 迭代
- React 實現：
//React.js(.jsx)
var Iteration = React.createClass({
getInitialState(){
return{
array: [1,2,3,4]
}
},
reader(){
this.state.array.map(function(value){
return(
<span>{value}<span/>
)
});
}
});
ReactDom.reader(<Iteration />, document.getElementById('array'));
<div id="array"></div>
- Vue 實現：
// Vue.js(js)
var Iteration = new Vue({
el: 'array',
data:{
array:[1,2,3,4]
}
});
<div id="array">
<span v-for="value in array">{{value}}</span>
</div>
在這種情形下，Vue 因代碼量少且簡單再次略勝一籌。
Vue.js vs Reactjs 總結：
這些示例表明 Vue.js 更容易學習，並且能夠迅速提供生產力。同時，它也可以通過使用一些新的工具和模式來簡化大型代碼庫的管理工作。Vue.js 會隨着你的知識的豐富而逐漸擴展，這樣的話，你就可以開始學習新的工具、進行最佳實踐。
Angularjs vs Vue.js vs Reactjs
這個表格列出了關於這三個框架的一些有用的信息：
總結：
現如今 Vue 還沒有 React（由 Facebook 維護） 或 Angular（由 Google 支持） 那么流行。但是，許多開發者正開始轉向 Vue。Laravel 社區也已經開始考慮將其作為他們首選的前端框架之一。
總之，Vue 針對 React 和 Angular 暴露的問題提供了一種解決方案，同時也提供了一種更簡單易學的方式來編寫代碼。