轉(zhuǎn)自-前端之巔
更輕更快的Vue.js 2.0
嶄露頭角的JavaScript框架Vue.js 2.0版本已經(jīng)發(fā)布敦锌，在狂熱的JavaScript世界里帶來了讓人耳目一新的變化弃榨。
Vue創(chuàng)建者尤雨溪稱鲫懒，Vue 2.0?在性能上有顯著的提升剿配，同時(shí)保持輕量的文件下載：
渲染層基于一個(gè)輕量級(jí)的Virtual DOM實(shí)現(xiàn)進(jìn)行了重寫，該Virtual DOM實(shí)現(xiàn)fork自snabbdom。新的渲染層相比v1帶來了巨大的性能提升，也讓Vue 2.0成為了最快速的框架之一怎虫。
根據(jù)1.0到2.0遷移指南，“大約90％的API是相同的”困介。不同于一些JavaScript框架大审，從一個(gè)版本到下一個(gè)版本會(huì)有巨大的變化，在Vue 2.0中“核心概念沒有改變”座哩。
除了核心庫徒扶，vue-router和vuex庫已經(jīng)更新到2.0版本，vue-cli已經(jīng)默認(rèn)生成了 2.0 的腳手架根穷。
在Vue 2.0第一次宣布發(fā)布時(shí)姜骡，尤雨溪說過濾器要離開了。然而隨著時(shí)間的推移缠诅，這個(gè)立場(chǎng)改變了溶浴，Vue 2.0中仍然保留了文本插入過濾器。的確管引，在使用指南過濾器這一章節(jié)也指明了“Vue 2.x中過濾器僅能在mustache內(nèi)部綁定使用士败。要在指令綁定中實(shí)現(xiàn)相同的行為，應(yīng)該使用計(jì)算屬性褥伴×陆”框架不再提供任何內(nèi)置過濾器，并且數(shù)組過濾器（削減了基于標(biāo)準(zhǔn)的數(shù)組）也已經(jīng)取消了重慢。
因?yàn)閂ue主要不是由大型技術(shù)公司創(chuàng)建的饥臂，尤雨溪采取了不同的融資方式。尤雨溪能夠在這個(gè)項(xiàng)目全職工作要感謝Patreon似踱，在Patreon上尤雨溪設(shè)置的贊助方式是每月保證一定數(shù)量的金額隅熙。截至發(fā)稿時(shí)稽煤，Patreon每月為Vue的可持續(xù)發(fā)展贊助8853美元。除了尤雨溪之外囚戚，Vue.js核心團(tuán)隊(duì)還有18個(gè)人酵熙。
社區(qū)里大多是積極的回應(yīng)，“Vue比ng2更簡潔”以及“我發(fā)現(xiàn)Vue 2.0介于Angular 1和React之間驰坊。它是現(xiàn)代化的并且很容易學(xué)習(xí)和使用”匾二。
Vue在官網(wǎng)上發(fā)布了對(duì)比指南（http://vuefe.cn/guide/comparison.html），展示了它與其他框架的不同之處拳芙，本文摘錄其與如Angular和React對(duì)比察藐。
對(duì)比 React
React 和 Vue 有許多相似之處，它們都有：
使用 Virtual DOM
提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件舟扎。
將注意力集中保持在核心庫分飞，伴隨于此，有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫睹限。
由于有著眾多的相似處浸须，我們會(huì)用更多的時(shí)間在這一塊進(jìn)行比較。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性邦泄，同時(shí)也兼顧了平衡的考量。我們需要指出 React 比 Vue 更好的地方裂垦，像是他們的生態(tài)系統(tǒng)和豐富的自定義渲染器顺囊。
React社區(qū)為我們準(zhǔn)確進(jìn)行平衡的考量提供了非常積極地幫助，特別感謝來自 React 團(tuán)隊(duì)的 Dan Abramov 蕉拢。他非程靥迹慷慨的花費(fèi)時(shí)間來貢獻(xiàn)專業(yè)知識(shí)，幫助我們完善這篇文檔晕换，最后我們對(duì)最終結(jié)果都十分滿意午乓。
有了上面這些內(nèi)容，我們希望你能對(duì)下面這兩個(gè)庫的比較內(nèi)容的公正性感到放心闸准。
性能簡介
到目前為止益愈，針對(duì)現(xiàn)實(shí)情況的測(cè)試中，Vue 的性能是優(yōu)于 React 的夷家。如果你對(duì)此表示懷疑蒸其，請(qǐng)繼續(xù)閱讀。我們會(huì)解釋為什么會(huì)這樣（并且會(huì)提供一個(gè)與 React 團(tuán)隊(duì)共同約定的比較基準(zhǔn)）库快。
在渲染用戶界面的時(shí)候摸袁，DOM 的操作成本是最高的，不幸的是沒有庫可以讓這些原始操作變得更快义屏。
我們能做到的最好效果就是：
盡量減少 DOM 操作靠汁。Vue 和 React 都使用虛擬 DOM 來實(shí)現(xiàn)蜂大，并且兩者工作的效果一樣好。
盡量減少除 DOM 操作以外的其他操作蝶怔。這是 Vue 和 React 所不同的地方奶浦。
在 React 中，我們?cè)O(shè)定渲染一個(gè)元素的額外開銷是 1添谊，而平均渲染一個(gè)組件的開銷是 2财喳。那么在 Vue 中，一個(gè)元素的開銷更像是 0.1斩狱，但是平均組件的開銷將會(huì)是 4耳高，這是由于我們需要設(shè)定響應(yīng)系統(tǒng)所導(dǎo)致的。
這意味著：在典型的應(yīng)用中所踊，由于需要渲染的元素比組件的數(shù)量是更多的泌枪，因此 Vue 的性能表現(xiàn)將會(huì)遠(yuǎn)優(yōu)于 React。然而秕岛，在極端情況下碌燕，比如每個(gè)組件只渲染一個(gè)元素，Vue 就會(huì)通常更慢一些继薛。當(dāng)然接下來還有其他的原因修壕。
Vue 和 React 也提供功能性組件，這些組件因?yàn)槎际菦]有聲明遏考，沒有實(shí)例化的慈鸠，因此會(huì)花費(fèi)更少的開銷。當(dāng)這些都用于關(guān)鍵性能的場(chǎng)景時(shí)灌具，Vue 將會(huì)更快青团。為了證明這點(diǎn)，我們建立了一個(gè)簡單的參照項(xiàng)目（https://github.com/chrisvfritz/vue-render-performance-comparisons）咖楣，它負(fù)責(zé)渲染 10,000 個(gè)列表項(xiàng) 100 次督笆。我們鼓勵(lì)你基于此去嘗試運(yùn)行一下。然而在實(shí)際上诱贿，由于瀏覽器和硬件的差異甚至 JavaScript 引擎的不同娃肿，結(jié)果都會(huì)相應(yīng)有所不同。
如果你懶得去做瘪松，下面的數(shù)值是來自于一個(gè) 2014 年產(chǎn)的 MacBook Air 并在 Chrome 52 版本下運(yùn)行所產(chǎn)生的咸作。為了避免偶然性，每個(gè)參照項(xiàng)目都分別運(yùn)行 20 次并取自最好的結(jié)果：
VueReact
Fastest23ms63ms
Median42ms81ms
Average51ms94ms
95th Perc.73ms164ms
Slowest343ms453ms
在 React 中宵睦，你需要在處處去實(shí)現(xiàn)shouldComponentUpdate记罚，并且用不可變數(shù)據(jù)結(jié)構(gòu)才能實(shí)現(xiàn)最優(yōu)化的渲染。在 Vue 中壳嚎，組件的依賴被自動(dòng)追蹤桐智，所以當(dāng)這些依賴項(xiàng)變動(dòng)時(shí)末早，它才會(huì)更新。唯一需要注意的可能需要進(jìn)一步優(yōu)化的一點(diǎn)是在長列表中说庭，需要在每項(xiàng)上添加一個(gè)key屬性然磷。
這意味著，未經(jīng)優(yōu)化的 Vue 相比未經(jīng)優(yōu)化的 React 要快的多刊驴。由于 Vue 改進(jìn)過渲染性能姿搜，甚至全面優(yōu)化過的 React 通常也會(huì)慢于開箱即用的 Vue。
顯然捆憎，在生產(chǎn)環(huán)境中的性能是至關(guān)重要的舅柜，目前為止我們所具體討論的便是針對(duì)此環(huán)境。但開發(fā)過程中的表現(xiàn)也不容小視躲惰。不錯(cuò)的是用 Vue 和 React 開發(fā)大多數(shù)應(yīng)用的速度都是足夠快的致份。
然而，假如你要開發(fā)一個(gè)對(duì)性能要求比較高的數(shù)據(jù)可視化或者動(dòng)畫的應(yīng)用時(shí)础拨，你需要了解到下面這點(diǎn)：在開發(fā)中氮块，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀诡宗。
這是由于 React 有大量的檢查機(jī)制滔蝉，這會(huì)讓它提供許多有用的警告和錯(cuò)誤提示信息。我們同樣認(rèn)為這些是很重要的塔沃，但是我們?cè)趯?shí)現(xiàn)這些檢查時(shí)锰提，也更加密切地關(guān)注了性能方面。
HTML & CSS
在 React 中芳悲，它們都是 JavaScript 編寫的，聽起來這十分簡單和優(yōu)雅边坤。然而不幸的事實(shí)是名扛，JavaScript 內(nèi)的 HTML 和 CSS 會(huì)產(chǎn)生很多痛點(diǎn)。在Vue 中我們采用 Web 技術(shù)并在其上進(jìn)行擴(kuò)展茧痒。接下來將通過一些實(shí)例向你展示這意味的是什么肮韧。
在 React 中，所有的組件的渲染功能都依靠 JSX旺订。JSX 是使用 XML 語法編寫 Javascript 的一種語法糖弄企。這有一個(gè)通過React社區(qū)審核過的例子：
JSX 的渲染功能有下面這些優(yōu)勢(shì)：
你可以使用完整的編程語言 JavaScript 功能來構(gòu)建你的視圖頁面。
工具對(duì) JSX 的支持相比于現(xiàn)有可用的其他 Vue 模板還是比較先進(jìn)的（比如区拳，linting拘领、類型檢查、編輯器的自動(dòng)完成）樱调。
在 Vue 中约素，由于有時(shí)需要用這些功能届良，我們也提供了渲染功能并且支持了 JSX。然而圣猎，對(duì)于大多數(shù)組件來說士葫，渲染功能是不推薦使用了。
在這方面送悔，我們提供的是更簡單的模板：
優(yōu)點(diǎn)如下：
在寫模板的過程中慢显，樣式風(fēng)格已定并涉及更少的功能實(shí)現(xiàn)。
模板總是會(huì)被聲明的欠啤。
模板中任何 HTML 語法都是有效的荚藻。
閱讀起來更貼合英語（比如，for each item in items）跪妥。
不需要高級(jí)版本的 JavaScript 語法鞋喇，來增加可讀性。
這樣眉撵，不僅開發(fā)人員更容易編寫代碼侦香，設(shè)計(jì)人員和開發(fā)人員也可以更容易的分析代碼和貢獻(xiàn)代碼。
這還沒有結(jié)束纽疟。Vue 擁抱 HTML罐韩，而不是用 JavaScript 去重塑它。在模板內(nèi)污朽，Vue 也允許你用預(yù)處理器比如 Pug（原名 Jade）散吵。
React 生態(tài)也有一個(gè)項(xiàng)目(https://wix.github.io/react-templates/)允許你寫模板，但是存在一些缺點(diǎn)：
功能遠(yuǎn)沒有 Vue 模板系統(tǒng)豐富蟆肆。
需要從組件文件中分離出 HTML 代碼矾睦。
這是個(gè)第三方庫，而非官方支持炎功，可能未來核心庫更新就不再支持枚冗。
除非你把組件分布在多個(gè)文件上(例如CSS Modules)，要不在 React 中作用域內(nèi)的 CSS 就會(huì)產(chǎn)生警告蛇损。非常簡單的 CSS 還可以工作赁温，但是稍微復(fù)雜點(diǎn)的，比如懸停狀態(tài)淤齐、媒體查詢股囊、偽類選擇符等要么通過沉重的依賴來重做要么就直接不能用。
而 Vue 可以讓你在每個(gè)單文件組件中完全訪問 CSS更啄。
這個(gè)可選scoped屬性會(huì)自動(dòng)添加一個(gè)唯一的屬性（比如data-v-1）為組件內(nèi) CSS 指定作用域稚疹，編譯的時(shí)候.list-container:hover會(huì)被編譯成類似.list-container[data-v-1]:hover。
最后祭务，就像 HTML 一樣贫堰，你可以選擇自己偏愛的 CSS 預(yù)處理器編寫 CSS穆壕。這可以讓你圍繞設(shè)計(jì)為中心展開工作，而不是引入專門的庫來增加你應(yīng)用的體積和復(fù)雜度其屏。
規(guī)模
Vue 和 React 都提供了強(qiáng)大的路由來應(yīng)對(duì)大型應(yīng)用喇勋。React 社區(qū)在狀態(tài)管理方面非常有創(chuàng)新精神（比如Flux、Redux）偎行，而這些狀態(tài)管理模式甚至?Redux 本身也可以非常容易的集成在 Vue 應(yīng)用中川背。實(shí)際上，Vue 更進(jìn)一步地采用了這種模式（Vuex）蛤袒，更加深入集成 Vue 的狀態(tài)管理解決方案 Vuex 相信能為你帶來更好的開發(fā)體驗(yàn)熄云。
兩者另一個(gè)重要差異是，Vue 的路由庫和狀態(tài)管理庫都是由官方維護(hù)支持且與核心庫同步更新的妙真。React 則是選擇把這些問題交給社區(qū)維護(hù)缴允，因此創(chuàng)建了一個(gè)更分散的生態(tài)系統(tǒng)。但相對(duì)的珍德，React 的生態(tài)系統(tǒng)相比 Vue 更加繁榮练般。
最后，Vue 提供了Vue-cli 腳手架锈候，能讓你非常容易地構(gòu)建項(xiàng)目薄料，包含了?Webpack,?Browserify, 甚至?no build system。React 在這方面也提供了create-react-app泵琳，但是現(xiàn)在還存在一些局限性：
它不允許在項(xiàng)目生成時(shí)進(jìn)行任何配置摄职，而 Vue 支持 Yeoman-like 定制。
它只提供一個(gè)構(gòu)建單頁面應(yīng)用的單一模板获列，而 Vue 提供了各種用途的模板谷市。
它不能用用戶自建的模板構(gòu)建項(xiàng)目，而自建模板對(duì)企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的击孩。
而要注意的是這些限制是故意設(shè)計(jì)的歌懒，這有它的優(yōu)勢(shì)。例如溯壶，如果你的項(xiàng)目需求非常簡單，你就不需要自定義生成過程甫男。你能把它作為一個(gè)依賴來更新且改。如果閱讀更多關(guān)于不同的設(shè)計(jì)理念。
React 學(xué)習(xí)曲線陡峭板驳，在你開始學(xué) React 前又跛，你需要知道 JSX 和 ES2015，因?yàn)樵S多示例用的是這些語法若治。你需要學(xué)習(xí)構(gòu)建系統(tǒng)慨蓝，雖然你在技術(shù)上可以用 Babel 來實(shí)時(shí)編譯代碼感混，但是這并不推薦用于生產(chǎn)環(huán)境。
就像 Vue 向上擴(kuò)展好比 React 一樣礼烈，Vue 向下擴(kuò)展后就類似于 jQuery弧满。你只要把如下標(biāo)簽放到頁面就可以運(yùn)行：
然后你就可以編寫 Vue 代碼并應(yīng)用到生產(chǎn)中，你只要用 min 版 Vue 文件替換掉就不用擔(dān)心其他的性能問題此熬。
由于起步階段不需學(xué) JSX庭呜，ES2015 以及構(gòu)建系統(tǒng)，所以開發(fā)者只需不到一天的時(shí)間閱讀指南就可以建立簡單的應(yīng)用程序犀忱。
本地渲染
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拐纱。這意味著在 Weex 的幫助下，你使用 Vue 語法開發(fā)的組件不僅僅可以運(yùn)行在瀏覽器端地来，還能被用于開發(fā) IOS 和 Android 上的原生應(yīng)用戳玫。
在現(xiàn)在，Weex 還在積極發(fā)展未斑，成熟度也不能和 ReactNative 相抗衡咕宿。但是，Weex 的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動(dòng)蜡秽，Vue 團(tuán)隊(duì)也會(huì)和 Weex 團(tuán)隊(duì)積極合作確保為開發(fā)者帶來良好的開發(fā)體驗(yàn)府阀。
MobX
Mobx 在 React 社區(qū)很流行，實(shí)際上在 Vue 也采用了幾乎相同的反應(yīng)系統(tǒng)芽突。在有限程度上试浙，React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue，所以如果你習(xí)慣組合使用它們寞蚌，那么選擇 Vue 會(huì)更合理。
對(duì)比Angular 1
Vue 的一些語法和 Angular 的很相似（例如v-ifvsng-if）壹哺。因?yàn)?b>Angular 是 Vue 早期開發(fā)的靈感來源。然而岗喉，Augular 中存在的許多問題炸庞，在 Vue 中已經(jīng)得到解決燕雁。
在 API 與設(shè)計(jì)兩方面上 Vue.js 都比 Angular 1 簡單得多，因此你可以快速地掌握它的全部特性并投入開發(fā)僧免。
Vue.js 是一個(gè)更加靈活開放的解決方案金踪。它允許你以希望的方式組織應(yīng)用程序法希，而不是在任何時(shí)候都必須遵循 Angular 1 制定的規(guī)則靶瘸，這讓 Vue 能適用于各種項(xiàng)目。我們知道把決定權(quán)交給你是非常必要的。
這也就是為什么我們提供Webpack template匠楚，讓你可以用幾分鐘，去選擇是否啟用高級(jí)特性，比如熱模塊加載、linting冻河、CSS 提取等等叨叙。
Angular 1 使用雙向綁定，Vue 在不同組件間強(qiáng)制使用單向數(shù)據(jù)流爽醋。這使應(yīng)用中的數(shù)據(jù)流更加清晰易懂田度。
在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操作解愤，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯镇饺。在 Angular 中兩者有不少相混的地方。
Vue 有更好的性能送讲，并且非常非常容易優(yōu)化奸笤，因?yàn)樗皇褂门K檢查。
在 Angular 1 中哼鬓，當(dāng) watcher 越來越多時(shí)會(huì)變得越來越慢监右，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算异希。并且健盒，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。Angular 用戶常常要使用深?yuàn)W的技術(shù)扣癣，以解決臟檢查循環(huán)的問題惰帽。有時(shí)沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域。
Vue 則根本沒有這個(gè)問題父虑，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步隊(duì)列更新该酗，所有的數(shù)據(jù)變化都是獨(dú)立觸發(fā)，除非它們之間有明確的依賴關(guān)系士嚎。
有意思的是呜魄，Angular 2 和 Vue 用相似的設(shè)計(jì)解決了一些 Angular 1 中存在的問題。
對(duì)比 Angular 2
我們單獨(dú)將 Augluar 2 作分類莱衩，因?yàn)樗耆且粋€(gè)全新的框架爵嗅。例如：它具有優(yōu)秀的組件系統(tǒng)，并且許多實(shí)現(xiàn)已經(jīng)完全重寫膳殷，API 也完全改變了操骡。
Angular 1 面向的是較小的應(yīng)用程序，Angular 2 已轉(zhuǎn)移焦點(diǎn)赚窃，面向的是大型企業(yè)應(yīng)用册招。在這一點(diǎn)上 TypeScript 經(jīng)常會(huì)被引用，它對(duì)那些喜歡用 Java 或者 C# 等類型安全的語言的人是非常有用的勒极。
Vue 也十分適合制作企業(yè)應(yīng)用是掰，你也可以通過使用官方類型或用戶貢獻(xiàn)的裝飾器來支持 TypeScript，這完全是自由可選的辱匿。
在性能方面键痛，這兩個(gè)框架都非常的快。但目前尚沒有足夠的數(shù)據(jù)用例來具體展示匾七。如果你一定要量化這些數(shù)據(jù)絮短，你可以查看第三方參照，它表明 Vue 2 相比 Angular2 是更快的昨忆。
在大小方面丁频，雖然 Angular 2 使用 tree-shaking 和離線編譯技術(shù)使代碼體積減小了許多。但包含編譯器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 還是要小的多邑贴。但是要注意席里，用 Angular 2 的 App 的體積縮減是使用了 tree-shaking 移除了那些框架中沒有用到的功能，但隨著功能引入的不斷增多拢驾，尺寸會(huì)變得越來越大奖磁。
Vue 相比于 Angular 2 則更加靈活，Vue 官方提供了構(gòu)建工具來協(xié)助你構(gòu)建項(xiàng)目繁疤，但它并不限制你去如何構(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è)文件和超過 3 千多字的介紹懂盐，這一切都是為了完成個(gè) Hello World。而Vue’s Hello World就非常簡單糕档。甚至我們并不用花費(fèi)一整個(gè)頁面去介紹它莉恼。
本文“更輕更快的Vue.js 2.0”部分內(nèi)容作者為David Iffland?，譯者為任美芒速那。
Vue與其他框架的對(duì)比參見其官網(wǎng)：http://vuefe.cn/guide/comparison.html#HTML-amp-CSS
