302
vue.js與其他前端框架的對比
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 >
<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 >
<div >
<div >
<img :src="this.item.image" :alt="this.item.name" />
</div>
<div >
<h3>{{this.item.name}}</h3>
<p>
{{this.item.desc}}
</p>
<button v-on:click="addToOrderNew" >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 ></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還是有很多的不足：
作者：曹之忽
鏈接：https://www.zhihu.com/question/40975678/answer/133505411
來源：知乎
著作權歸作者所有。商業轉載請聯係作者獲得授權，非商業轉載請注明出處。
- Angular2原生Form支持： Angular2原生的Form模塊功能相當強大。除了雙向綁定之類的基本功能，還能通過programatic API 控製dom元素的表單行為。也有成型API提供自定義validator。這一點Vue隻有v-model和第三方庫。對於後台之類的重表單應用，還是Ng2有優勢。
- 依賴注入無論你喜不喜歡DI，這就是Angular2的強大功能之一。有DI可以在不改變代碼結構的情況下完成功能替換。（如，在desktop和mobile有不同功能，可以通過注入不同service實現，而共用相同的template和directive）。Vue則需要程序員自己規劃代碼組織，用來支持共享組件。DI也可以用於類似module local state的功能。比如，一個視頻播放控件有幾個子組件完成，子組件需要分享一個狀態。這一點Angular2有原生的service injection pattern。而Vue則沒有官方推薦。
- 對標準向後兼容Angular2在一些細節上對標準有更好的支持。比如 list differ 算法中 Angular2 可以支持實現了Symbol.iterator的對象，而Vue隻能支持Array。對Observable和Promise，Angular2在應用的各個地方，甚至模板級別都有支持(async pipe)。而Vue需要vue-rx等第三方庫支持。Angular2的組件有shadow dom的實現可以選擇，而Vue目前還沒有。
- 測試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 是依靠社區來建立集成係統。
最後更新：2017-09-23 16:02:39