這個(gè)頁(yè)面無(wú)疑是最難編寫的，但也是非常重要的?；蛟S你遇到了一些問(wèn)題并且先前用其他的框架解決了。來(lái)這里的目的是看看Vue是否有更好的解決方案。那么你就來(lái)對(duì)了。
客觀來(lái)說(shuō)，作為核心團(tuán)隊(duì)成員，顯然我們會(huì)更偏愛(ài)Vue，對(duì)于某些問(wèn)題用Vue來(lái)解決會(huì)更好，如果沒(méi)有這點(diǎn)信念，我們也就不會(huì)整天為此忙活了。但是，我們想盡可能地公平和準(zhǔn)確地來(lái)講述。其他的框架也有顯著的優(yōu)點(diǎn)，比如 Rect 的生態(tài)系統(tǒng)，或者 Knockout 對(duì)瀏覽器支持到 IE6 。我們把這些也都會(huì)全列出來(lái)。
React 和 Vue 有許多相似之處，它們都有：
相似的作用域，我們會(huì)用更多的時(shí)間來(lái)講這一塊的比較。不僅我們要保持技術(shù)的準(zhǔn)確性，同時(shí)兼顧平衡。我們指出React比Vue更好的地方，例如，他們的生態(tài)系統(tǒng)和豐富的自定義渲染器。
React社區(qū) 在這里 非常積極地幫助我們實(shí)現(xiàn)這一平衡，特別感謝來(lái)自 React 團(tuán)隊(duì)的 Dan Abramov 。他非常慷慨的花費(fèi)時(shí)間來(lái)貢獻(xiàn)專業(yè)知識(shí)，來(lái)幫我們完善這個(gè)文件，直到我們都 滿意 。
這么說(shuō)，就是希望你能對(duì)這兩個(gè)庫(kù)的比較的公平性感到放心。
到目前為止，在現(xiàn)實(shí)的測(cè)試中，Vue 是優(yōu)于 React 的（通常至少快20%-50%，盡管在某些情況下還要更快）。我們可以提供一個(gè)到這個(gè)參照項(xiàng)目的鏈接，但是坦率的說(shuō)，所有的參照在某些方面是有缺陷的，很少有像你所寫的一個(gè)真實(shí)應(yīng)用。相反，讓我們?cè)敿?xì)了解下。
渲染性能
在渲染用戶界面的時(shí)候，DOM的操作是最昂貴，不幸的是沒(méi)有庫(kù)可以讓這些原始操作變得更快。
我們能做的最好的就是：
在React中，渲染一個(gè)元素的額外開銷是1，而平均渲染一個(gè)組件的開銷是2。在Vue中，一個(gè)元素的開銷更像0.1，但是平均組件的開銷將是4由于安裝所需要的反應(yīng)系統(tǒng)的設(shè)置。
這意味著，在典型的應(yīng)用中，需要渲染的元素比組件的數(shù)量是更多的，因?yàn)閂ue的性能表現(xiàn)將會(huì)遠(yuǎn)優(yōu)于React。然而，在極端情況下，比如每個(gè)組件渲染一個(gè)元素，Vue 將通常會(huì)較慢。顯然這還沒(méi)有說(shuō)完。
Vue 和 React 也提供提供功能性組件，這些組件都是沒(méi)有聲明，沒(méi)有實(shí)例化，因此需要更少的開銷。當(dāng)這些都用于性能的關(guān)鍵位置，Vue會(huì)更快。為了證明這點(diǎn)，我們建立一個(gè)簡(jiǎn)單的 參照項(xiàng)目 ，它只是渲染 10,000 個(gè)列表項(xiàng) 100次。我們鼓勵(lì)你自己去試一下，實(shí)際上，由于瀏覽器和硬件的原因，結(jié)果會(huì)有所不同，由于 JavaScript 引擎的不同，結(jié)果也會(huì)有很大不同。
如果你懶得去做，下面的數(shù)字?jǐn)?shù)字從一個(gè)運(yùn)行在 Chrome 52 在一個(gè) 2014年產(chǎn)的 MacBook Air上。為了避免偶然性，每個(gè)參照項(xiàng)目都分開運(yùn)行20次，和包含的最好的結(jié)果：
| Vue | React | |
|---|---|---|
| Fastest | 23ms | 63ms |
| Median | 42ms | 81ms |
| Average | 51ms | 94ms |
| 95th Perc. | 73ms | 164ms |
| Slowest | 343ms | 453ms |
更新性能
在React中，你需要在每個(gè)地方去實(shí)現(xiàn) shouldComponentUpdate ，并且用immutable數(shù)據(jù)結(jié)構(gòu)才能實(shí)現(xiàn)完全完全優(yōu)化的 re-renders 。在 Vue 中，組件的依賴被自動(dòng)追蹤，所以當(dāng)這些依賴項(xiàng)變動(dòng)時(shí)，它才會(huì)更新。在長(zhǎng)列表中，有時(shí)候需要進(jìn)一步優(yōu)化的話，只需要在每項(xiàng)上添加 key 屬性。
這意味著，由于Vue內(nèi)改進(jìn)過(guò)的渲染性能，更新未經(jīng)優(yōu)化的Vue回避未經(jīng)優(yōu)化的React要快的多。甚至全面優(yōu)化過(guò)的React通常也會(huì)慢于未加處理的Vue。
開發(fā)中
顯然，在生產(chǎn)中的性能是最重要的，并且也是到目前為止我們所討論的。開發(fā)過(guò)程中的表現(xiàn)也是很重要的。好消息是用 Vue 和 React 開發(fā)大多數(shù)應(yīng)用的速度都是足夠快的。
然而，加入你要開發(fā)一個(gè)對(duì)性能要求比較高的數(shù)據(jù)可視化或者動(dòng)畫的應(yīng)用時(shí)，這將會(huì)很有用。在開發(fā)中， Vue 每秒最高處理10幀，而 React 每秒最高處理不到1幀。
這是由于 React 有大量的檢查機(jī)制，這能讓它提供許多有用的警告和錯(cuò)誤提示信息。我們同意那些很重要的，但在我們實(shí)現(xiàn)這些檢查時(shí)候，也更加密切地關(guān)注著性能。
在React中，所有的都是 JavaScript，聽起來(lái)十分簡(jiǎn)單和優(yōu)雅。不幸的事實(shí)是，JavaScript 內(nèi)的 HTML 和 CSS 會(huì)引起很多痛苦。在 Vue 中我們采用的 Web 技術(shù)并在其上面擴(kuò)展。接下來(lái)將通過(guò)一些實(shí)例向你展示這所意味的是什么。
JSX vs Templates
在 React 中，所有的組件的渲染功能使用的都是JSX。JSX 是使用 XML 語(yǔ)法編寫 Javascript 的一種語(yǔ)法糖。
render () {
let { items } = this.props
let children
if ( items.length > 0 ) {
children = (
<ul>
{items.map( item =>
<li key={item.id}>{item.name}</li>
)}
</ul>
)
} else {
children = <p>No items found.</p>
}
return (
<div className = 'list-container'>
{children}
</div>
)
}
JSX的渲染功能有一些優(yōu)勢(shì)：
在 Vue 中，由于有時(shí)需要用那些功能，我們也提供了渲染功能 并且 支持JSX 。然而，對(duì)于大多數(shù)組件來(lái)說(shuō)，渲染功能是不推薦使用了。
在這方面，我們提供的是個(gè)更簡(jiǎn)單的模板：
<template>
<div class="list-container">
<ul v-if="items.length">
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
<p v-else>No items found.</p>
</div>
</template>
優(yōu)勢(shì)如下：
這樣，不僅開發(fā)人員更容易編寫代碼，設(shè)計(jì)人員和開發(fā)人員也可以更容易的分析代碼和貢獻(xiàn)代碼。
還沒(méi)有結(jié)束。Vue擁抱HTML，而不是用JavaScript重塑它。在模板內(nèi)，Vue也允許你用預(yù)處理器比如Pub（原名 Jade） 。
React 生態(tài)也有一個(gè) 項(xiàng)目 允許你寫模板，但是有一些缺點(diǎn)：
CSS的組件作用域
除非你把組件分布在多個(gè)文件上(例如 CSS Modules ),要不作用域內(nèi)的CSS就會(huì)暴警告。非常簡(jiǎn)單的CSS還可以工作，但是稍微復(fù)雜點(diǎn)的，比如懸停狀態(tài)、媒體查詢、偽類選擇符要么會(huì)被修改要么就不能用。
Vue讓你可以完全訪問(wèn) 單文件組件 。
<style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
</style>
這個(gè)可選 scoped 屬性自動(dòng)添加一個(gè)唯一的屬性（比如 data-v-1 ）為組件內(nèi)CSS指定作用范圍，編譯的時(shí)候 .list-container:hover 會(huì)被編譯成類似 .list-container[data-v-1]:hover 。
最后，你可以選擇自己偏愛(ài)的CSS預(yù)處理器編寫CSS。這可以讓你圍繞設(shè)計(jì)為中心展開工作，而不是引入庫(kù)來(lái)增加你應(yīng)用的容量和復(fù)雜度。
擴(kuò)大
Vue和React都提供了強(qiáng)大的路由來(lái)應(yīng)對(duì)對(duì)于大型應(yīng)用。React社區(qū)在狀態(tài)管理方面非常有創(chuàng)新精神（比如Flux、Redux），而這些狀態(tài)管理模式甚至Redux本身也是非常容易能夠集成在Vue應(yīng)用中的。實(shí)際上，Vue更進(jìn)一步地采用了這種模式（Vuex），把Vuex集成進(jìn)Vue能帶來(lái)更好的開發(fā)體驗(yàn)。
兩者另一個(gè)重要差異是，Vue伴隨的路由庫(kù)和狀態(tài)管理庫(kù)都是由官方支持維護(hù)且和核心庫(kù)同步更新的。React 生態(tài)更成熟，選擇是把這些問(wèn)題交給社區(qū)維護(hù)。
最后，Vue 提供了一個(gè)Vue-cli 腳手架 ，能讓你非常容易地構(gòu)建項(xiàng)目，可以包含 Webpack , Browserify , 或者 no build system 。React在這方面也提供了 create-react-app ，但是現(xiàn)在還有一些局限性：
注意這些限制是故意設(shè)計(jì)的，這有它的優(yōu)勢(shì)。例如，如果你的項(xiàng)目需求非常簡(jiǎn)單，你就不需要自定義生成過(guò)程。你能把它作為一個(gè)依賴來(lái)更新。如果閱讀更多關(guān)于 不同的設(shè)計(jì)理念 。
縮小
React學(xué)習(xí)曲線陡峭，在你開始學(xué) React 前，你需要知道 JSX 和 ES2015，因?yàn)樵S多示例用的是這些語(yǔ)法。你需要學(xué)習(xí)構(gòu)建系統(tǒng)，雖然你可以在技術(shù)上可以用 Babel Standalone 來(lái)編譯代碼，但是不推薦用于生產(chǎn)。
Vue樣擴(kuò)大后就像React，縮小后就像 Jquery。你需要做的就是把如下標(biāo)簽放到頁(yè)面就行：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
然后就可編寫Vue代碼并應(yīng)用到生產(chǎn)中，而不用擔(dān)心性能問(wèn)題。
由于起步階段不需學(xué)JSX，ES2015 或構(gòu)建系統(tǒng)，所以建立應(yīng)用花的時(shí)間會(huì)更少。
ReactNative能使你用相同的組件模型編寫有本地渲染能力的APP（IOS或Android）。能同時(shí)跨多平臺(tái)開發(fā)，對(duì)開發(fā)者是非常棒的。相應(yīng)地，Vue和Weex會(huì)進(jìn)行官方合作，Weex是阿里的跨平臺(tái)用戶界面開發(fā)框架，Weex 的 JavaScript 框架運(yùn)行時(shí)用的就是Vue。這以為著不僅在瀏覽器，在 IOS 和 Android 上面也可以用 Vue 來(lái)進(jìn)行開發(fā)。
在現(xiàn)在，Weex 還在積極發(fā)展，成熟度也不能和 ReactNative 相抗衡。但是，Weex的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動(dòng)，Vue 團(tuán)隊(duì)也會(huì)和 Weex 團(tuán)隊(duì)積極合作確保為開發(fā)者帶來(lái)良好的開發(fā)體驗(yàn)。
Mobx 在 React 社區(qū)很流行，實(shí)際上在Vue也采用了幾乎相同的反應(yīng)系統(tǒng)。在有限程度上，React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue，所以如果你習(xí)慣組合使用它們，那么選擇 Vue 會(huì)更合理。
Due的一些語(yǔ)法和Angular的很相似（例如 v-if vs ng-if ）。因?yàn)锳ngular是Vue早期開發(fā)的靈感來(lái)源。然而，Augular中存在許多問(wèn)題，在Vue中已經(jīng)得到解決。
在 API 與設(shè)計(jì)兩方面上 Vue.js 都比 Angular 1 簡(jiǎn)單得多，因此你可以快速地掌握它的全部特性并投入開發(fā)。
Vue.js 是一個(gè)更加靈活開放的解決方案。它允許你以希望的方式組織應(yīng)用程序，而不是在任何時(shí)候都必須遵循 Angular 1 制定的規(guī)則，這使讓Vue能適用于各種項(xiàng)目。我們知道把決定權(quán)交給你，是非常必要的，就是是為什么提供 Webpack template ，讓你用幾分鐘，去選擇是否用高級(jí)特性，比如熱模塊加載、linting 、
Css extraction 等等。
Angular 1 使用雙向綁定，Vue在不同組件間強(qiáng)制適用單向數(shù)據(jù)流。這使應(yīng)用中的數(shù)據(jù)流清晰易懂。
在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中兩者有不少相混的地方。
Vue.js 有更好的性能，并且非常非常容易優(yōu)化，因?yàn)樗皇褂门K檢查。
在Angular 1中，當(dāng) watcher 越來(lái)越多時(shí)會(huì)變得越來(lái)越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。 Angular 用戶常常要使用深?yuàn)W的技術(shù)，以解決臟檢查循環(huán)的問(wèn)題。有時(shí)沒(méi)有簡(jiǎn)單的辦法來(lái)優(yōu)化有大量 watcher 的作用域。
Vue.js 則根本沒(méi)有這個(gè)問(wèn)題，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步列隊(duì)更新，所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā)，除非它們之間有明確的依賴關(guān)系。
有意思的是，Angular 2 和 Vue 用相似的設(shè)計(jì)解決了一些 Angular 1 中存在的問(wèn)題。
Augluar 2完全是一個(gè)全新的框架。例如,它具有優(yōu)秀的組件系統(tǒng)，并且許多實(shí)現(xiàn)已經(jīng)完全重寫，API也完全改變了。
Angular 1面向的較小的應(yīng)用程序，Angular 2已轉(zhuǎn)移焦點(diǎn)，面向的是大型企業(yè)應(yīng)用。TypeScript被引用，這對(duì)那些喜歡用Java或者C#等類型安全的語(yǔ)言的人是非常有用的。
Vue也適合 企業(yè)應(yīng)用 ，也可以使用TypeScript來(lái)支持 官方類型 和 用戶貢獻(xiàn)的類型 ，盡管這是可選的。
在性能方面，這兩個(gè)框架都是非?？?。但是如果你查看 第三方參照 ，就可以得出 Vue 2 比 Angular2 要快的。
在尺寸方面，雖然 Angular 2 使用 tree-shaking 技術(shù)和編譯技術(shù)能使代碼尺寸減小。
即便包含編譯器和全部功能 Vue2(23kb)比起 Angular 2(50kb)還是小的多。但是要注意，用 Angular 的 App 的尺寸縮減是用 tree-shaking 移除了那些框架中沒(méi)有用到的功能，當(dāng)隨著引入功能的增多，尺寸會(huì)越來(lái)越大。
Vue 官方提供了構(gòu)建工具，但沒(méi)限制你如何構(gòu)建。有人喜歡用統(tǒng)一的方式構(gòu)建，也有很多開發(fā)者喜歡這種靈活自由的方式。
開始使用Vue，你使用的是熟悉的HTML、符合ES5規(guī)則的JavaScript（也就是純JavaScript）。有了這些基本的技能，你可以快速地掌握它(指南)并投入開發(fā) 。
Angular 2 的學(xué)習(xí)曲線是非常陡峭的。即使不包括TypeScript，它們 開始指南 中所用的就有ES2015標(biāo)準(zhǔn)的JavaScript，18個(gè)NPM依賴包，4個(gè)文件和超過(guò)3千多字介紹，這一切都是為了完成個(gè)Hello World。而Vue's Hello World就非常簡(jiǎn)單。
Ember 是一個(gè)全能框架。它提供大量的約定，一旦你熟悉了它們，開發(fā)會(huì)很高效。不過(guò)，這也意味著學(xué)習(xí)曲線較高，而且不靈活。在框架和庫(kù)（加上一系列松散耦合的工具）之間權(quán)衡選擇。后者更自由，但是也要求你做更多的架構(gòu)決定。
也就是說(shuō)，最好比較 Vue.js 內(nèi)核和 Ember 的模板與數(shù)據(jù)模型層：
Vue 在普通 JavaScript 對(duì)象上建立響應(yīng)，提供自動(dòng)化的計(jì)算屬性。在 Ember 中需要將所有東西放在 Ember 對(duì)象內(nèi)，并且手工為計(jì)算屬性聲明依賴。
Vue 的模板語(yǔ)法可以用全功能的 JavaScript 表達(dá)式，而 Handlebars 的語(yǔ)法和幫助函數(shù)語(yǔ)法相比之下非常受限。
在性能上，Vue 甩開 Ember 幾條街，即使是 Ember2.0 的最新Glimmer引擎。Vue自動(dòng)批量更新，Ember 當(dāng)性能關(guān)鍵處需要手動(dòng)管理。
Knockout 是MVVM領(lǐng)域內(nèi)的先驅(qū)，并且追蹤依賴。它的響應(yīng)系統(tǒng)和Vue相似。它對(duì) 瀏覽器支持 以及所有的表現(xiàn)也是讓人印象深刻的。它能最低支持到IE6，而Vue最低只能支持到IE9。
隨著時(shí)間的推移，Knockout的發(fā)展已有所放緩，并且略顯有點(diǎn)老舊了。比如，它的組件系統(tǒng)缺少完備的生命周期事件方法，盡管這些在現(xiàn)在是非常常見。以及相比Vue調(diào)用子組件的接口顯得有點(diǎn)笨重。
如果你有興趣研究，會(huì)發(fā)現(xiàn)它們?cè)诮涌谠O(shè)計(jì)的構(gòu)思理念上是不同的。這些通過(guò)各自創(chuàng)建的 simple Todo List 可以體現(xiàn)出來(lái)。或許有點(diǎn)主觀，但是很多人認(rèn)為Vue的API接口更簡(jiǎn)單結(jié)構(gòu)更優(yōu)雅。
Polymer 是另一個(gè)由谷歌贊助的項(xiàng)目，事實(shí)上也是Vue的一個(gè)靈感來(lái)源。Vue的組件可以粗略的類比于Polymer的自定義元素，并且兩者具有相似的開發(fā)風(fēng)格。最大的不同之處在于，Polymer是構(gòu)建于最新版的Web Components標(biāo)準(zhǔn)之上的，并且需要非凡的polyfills來(lái)工作（性能下降），瀏覽器本身不支持這些功能。相比而言，Vue不需要依賴polyfills來(lái)工作，最低到IE9。
在 Polymer 1.0版本中，為了彌補(bǔ)性能，團(tuán)隊(duì)非常有限的使用數(shù)據(jù)綁定系統(tǒng)。例如，在Ploymer中支持的唯一表達(dá)式只有布爾值否定和單一的方法的調(diào)用，它的computed方法的實(shí)現(xiàn)也不是很靈活。
Polymer 自定義的元素是用HTML文件來(lái)創(chuàng)建的，這回限制你的普通的JavaScript/CSS（和被現(xiàn)代瀏覽器普遍支持的語(yǔ)言特性）。相比之下，Vue的單文件允許你非常容易的使用ES2015和你想用的Css的預(yù)編譯處理器。
當(dāng)部署到生產(chǎn)環(huán)境的時(shí)候，Polymer建議使用HTML Imports加載所有資源。而這要求服務(wù)器和客戶端都支持Http 2.0協(xié)議，且瀏覽器實(shí)現(xiàn)了標(biāo)準(zhǔn)。這是否可行就取決于你的目標(biāo)用戶和部署環(huán)境了。如果狀況不佳，你必須用Vulcanizer工具來(lái)來(lái)打包Polymer元素。在這方面，Vue 可以結(jié)合異步組件的特性和Webpack的代碼分割特性來(lái)實(shí)現(xiàn)懶加載（lazy-loaded）。這同時(shí)確保了對(duì)舊瀏覽器的兼容且又能更快加載。
對(duì)Vue和Web Component標(biāo)準(zhǔn)之間進(jìn)行深層次的整合，也是完全可行的，比如Custom Elements、Shadow DOM的樣式封裝。然而現(xiàn)在在我們做出嚴(yán)肅的承諾之前，我們?nèi)栽诘却龢?biāo)準(zhǔn)成熟，進(jìn)而廣泛應(yīng)用于主流的瀏覽器中。
Riot 2.0 提供了一個(gè)類似于基于組件的開發(fā)模型（在Riot中稱之為”Tag”），提供小巧精美的API。Riot 和 Vue 可能共享一些設(shè)計(jì)理念。即使相比Roit重一點(diǎn)，Vue還是有很多顯著優(yōu)勢(shì)的：
根據(jù)真實(shí)條件來(lái)渲染，Roit根據(jù)是否有分支簡(jiǎn)單顯示或隱藏所有內(nèi)容。
功能更加強(qiáng)大的路由機(jī)制，Roit的路由功能的API是極少的。
更多成熟工具的支持。Vue 提供官方支持 Webpack 、 Browserify 和 SystemJS ，而 Roit 是依靠社區(qū)來(lái)建立集成系統(tǒng)。
過(guò)渡效果系統(tǒng)。Riot現(xiàn)在沒(méi)有提供。
更好的性能。Roit 盡管廣告稱 用虛擬DOM，實(shí)際上用的還是臟檢查機(jī)制，因此和Angular 1患有相同的性能問(wèn)題。
來(lái)自：http://www.cnblogs.com/terry01/p/5938153.html
聯(lián)系客服
