轉(zhuǎn)自-前端之巔
更輕更快的Vue.js 2.0
嶄露頭角的JavaScript框架Vue.js 2.0版本已經(jīng)發(fā)布，在狂熱的JavaScript世界里帶來了讓人耳目一新的變化。
Vue創(chuàng)建者尤雨溪稱，Vue 2.0?在性能上有顯著的提升，同時保持輕量的文件下載：
渲染層基于一個輕量級的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框架，從一個版本到下一個版本會有巨大的變化，在Vue 2.0中“核心概念沒有改變”。
除了核心庫，vue-router和vuex庫已經(jīng)更新到2.0版本，vue-cli已經(jīng)默認(rèn)生成了 2.0 的腳手架。
在Vue 2.0第一次宣布發(fā)布時，尤雨溪說過濾器要離開了。然而隨著時間的推移，這個立場改變了，Vue 2.0中仍然保留了文本插入過濾器。的確，在使用指南過濾器這一章節(jié)也指明了“Vue 2.x中過濾器僅能在mustache內(nèi)部綁定使用。要在指令綁定中實(shí)現(xiàn)相同的行為，應(yīng)該使用計算屬性。”框架不再提供任何內(nèi)置過濾器，并且數(shù)組過濾器（削減了基于標(biāo)準(zhǔn)的數(shù)組）也已經(jīng)取消了。
因?yàn)閂ue主要不是由大型技術(shù)公司創(chuàng)建的，尤雨溪采取了不同的融資方式。尤雨溪能夠在這個項(xiàng)目全職工作要感謝Patreon，在Patreon上尤雨溪設(shè)置的贊助方式是每月保證一定數(shù)量的金額。截至發(fā)稿時，Patreon每月為Vue的可持續(xù)發(fā)展贊助8853美元。除了尤雨溪之外，Vue.js核心團(tuán)隊還有18個人。
社區(qū)里大多是積極的回應(yīng)，“Vue比ng2更簡潔”以及“我發(fā)現(xiàn)Vue 2.0介于Angular 1和React之間。它是現(xiàn)代化的并且很容易學(xué)習(xí)和使用”。
Vue在官網(wǎng)上發(fā)布了對比指南（http://vuefe.cn/guide/comparison.html），展示了它與其他框架的不同之處，本文摘錄其與如Angular和React對比。
對比 React
React 和 Vue 有許多相似之處，它們都有：
使用 Virtual DOM
提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件。
將注意力集中保持在核心庫，伴隨于此，有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫。
由于有著眾多的相似處，我們會用更多的時間在這一塊進(jìn)行比較。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性，同時也兼顧了平衡的考量。我們需要指出 React 比 Vue 更好的地方，像是他們的生態(tài)系統(tǒng)和豐富的自定義渲染器。
React社區(qū)為我們準(zhǔn)確進(jìn)行平衡的考量提供了非常積極地幫助，特別感謝來自 React 團(tuán)隊的 Dan Abramov 。他非常慷慨的花費(fèi)時間來貢獻(xiàn)專業(yè)知識，幫助我們完善這篇文檔，最后我們對最終結(jié)果都十分滿意。
有了上面這些內(nèi)容，我們希望你能對下面這兩個庫的比較內(nèi)容的公正性感到放心。
性能簡介
到目前為止，針對現(xiàn)實(shí)情況的測試中，Vue 的性能是優(yōu)于 React 的。如果你對此表示懷疑，請繼續(xù)閱讀。我們會解釋為什么會這樣（并且會提供一個與 React 團(tuán)隊共同約定的比較基準(zhǔn)）。
在渲染用戶界面的時候，DOM 的操作成本是最高的，不幸的是沒有庫可以讓這些原始操作變得更快。
我們能做到的最好效果就是：
盡量減少 DOM 操作。Vue 和 React 都使用虛擬 DOM 來實(shí)現(xiàn)，并且兩者工作的效果一樣好。
盡量減少除 DOM 操作以外的其他操作。這是 Vue 和 React 所不同的地方。
在 React 中，我們設(shè)定渲染一個元素的額外開銷是 1，而平均渲染一個組件的開銷是 2。那么在 Vue 中，一個元素的開銷更像是 0.1，但是平均組件的開銷將會是 4，這是由于我們需要設(shè)定響應(yīng)系統(tǒng)所導(dǎo)致的。
這意味著：在典型的應(yīng)用中，由于需要渲染的元素比組件的數(shù)量是更多的，因此 Vue 的性能表現(xiàn)將會遠(yuǎn)優(yōu)于 React。然而，在極端情況下，比如每個組件只渲染一個元素，Vue 就會通常更慢一些。當(dāng)然接下來還有其他的原因。
Vue 和 React 也提供功能性組件，這些組件因?yàn)槎际菦]有聲明，沒有實(shí)例化的，因此會花費(fèi)更少的開銷。當(dāng)這些都用于關(guān)鍵性能的場景時，Vue 將會更快。為了證明這點(diǎn)，我們建立了一個簡單的參照項(xiàng)目（https://github.com/chrisvfritz/vue-render-performance-comparisons），它負(fù)責(zé)渲染 10,000 個列表項(xiàng) 100 次。我們鼓勵你基于此去嘗試運(yùn)行一下。然而在實(shí)際上，由于瀏覽器和硬件的差異甚至 JavaScript 引擎的不同，結(jié)果都會相應(yīng)有所不同。
如果你懶得去做，下面的數(shù)值是來自于一個 2014 年產(chǎn)的 MacBook Air 并在 Chrome 52 版本下運(yùn)行所產(chǎn)生的。為了避免偶然性，每個參照項(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)這些依賴項(xiàng)變動時，它才會更新。唯一需要注意的可能需要進(jìn)一步優(yōu)化的一點(diǎn)是在長列表中，需要在每項(xiàng)上添加一個key屬性。
這意味著，未經(jīng)優(yōu)化的 Vue 相比未經(jīng)優(yōu)化的 React 要快的多。由于 Vue 改進(jìn)過渲染性能，甚至全面優(yōu)化過的 React 通常也會慢于開箱即用的 Vue。
顯然，在生產(chǎn)環(huán)境中的性能是至關(guān)重要的，目前為止我們所具體討論的便是針對此環(huán)境。但開發(fā)過程中的表現(xiàn)也不容小視。不錯的是用 Vue 和 React 開發(fā)大多數(shù)應(yīng)用的速度都是足夠快的。
然而，假如你要開發(fā)一個對性能要求比較高的數(shù)據(jù)可視化或者動畫的應(yīng)用時，你需要了解到下面這點(diǎn)：在開發(fā)中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。
這是由于 React 有大量的檢查機(jī)制，這會讓它提供許多有用的警告和錯誤提示信息。我們同樣認(rèn)為這些是很重要的，但是我們在實(shí)現(xiàn)這些檢查時，也更加密切地關(guān)注了性能方面。
HTML & CSS
在 React 中，它們都是 JavaScript 編寫的，聽起來這十分簡單和優(yōu)雅。然而不幸的事實(shí)是，JavaScript 內(nèi)的 HTML 和 CSS 會產(chǎn)生很多痛點(diǎn)。在Vue 中我們采用 Web 技術(shù)并在其上進(jìn)行擴(kuò)展。接下來將通過一些實(shí)例向你展示這意味的是什么。
在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 Javascript 的一種語法糖。這有一個通過React社區(qū)審核過的例子：
JSX 的渲染功能有下面這些優(yōu)勢：
你可以使用完整的編程語言 JavaScript 功能來構(gòu)建你的視圖頁面。
工具對 JSX 的支持相比于現(xiàn)有可用的其他 Vue 模板還是比較先進(jìn)的（比如，linting、類型檢查、編輯器的自動完成）。
在 Vue 中，由于有時需要用這些功能，我們也提供了渲染功能并且支持了 JSX。然而，對于大多數(shù)組件來說，渲染功能是不推薦使用了。
在這方面，我們提供的是更簡單的模板：
優(yōu)點(diǎn)如下：
在寫模板的過程中，樣式風(fēng)格已定并涉及更少的功能實(shí)現(xiàn)。
模板總是會被聲明的。
模板中任何 HTML 語法都是有效的。
閱讀起來更貼合英語（比如，for each item in items）。
不需要高級版本的 JavaScript 語法，來增加可讀性。
這樣，不僅開發(fā)人員更容易編寫代碼，設(shè)計人員和開發(fā)人員也可以更容易的分析代碼和貢獻(xiàn)代碼。
這還沒有結(jié)束。Vue 擁抱 HTML，而不是用 JavaScript 去重塑它。在模板內(nèi)，Vue 也允許你用預(yù)處理器比如 Pug（原名 Jade）。
React 生態(tài)也有一個項(xiàng)目(https://wix.github.io/react-templates/)允許你寫模板，但是存在一些缺點(diǎn)：
功能遠(yuǎn)沒有 Vue 模板系統(tǒng)豐富。
需要從組件文件中分離出 HTML 代碼。
這是個第三方庫，而非官方支持，可能未來核心庫更新就不再支持。
除非你把組件分布在多個文件上(例如CSS Modules)，要不在 React 中作用域內(nèi)的 CSS 就會產(chǎn)生警告。非常簡單的 CSS 還可以工作，但是稍微復(fù)雜點(diǎn)的，比如懸停狀態(tài)、媒體查詢、偽類選擇符等要么通過沉重的依賴來重做要么就直接不能用。
而 Vue 可以讓你在每個單文件組件中完全訪問 CSS。
這個可選scoped屬性會自動添加一個唯一的屬性（比如data-v-1）為組件內(nèi) CSS 指定作用域，編譯的時候.list-container:hover會被編譯成類似.list-container[data-v-1]:hover。
最后，就像 HTML 一樣，你可以選擇自己偏愛的 CSS 預(yù)處理器編寫 CSS。這可以讓你圍繞設(shè)計為中心展開工作，而不是引入專門的庫來增加你應(yīng)用的體積和復(fù)雜度。
規(guī)模
Vue 和 React 都提供了強(qiáng)大的路由來應(yīng)對大型應(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)。
兩者另一個重要差異是，Vue 的路由庫和狀態(tài)管理庫都是由官方維護(hù)支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區(qū)維護(hù)，因此創(chuàng)建了一個更分散的生態(tài)系統(tǒng)。但相對的，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)目生成時進(jìn)行任何配置，而 Vue 支持 Yeoman-like 定制。
它只提供一個構(gòu)建單頁面應(yīng)用的單一模板，而 Vue 提供了各種用途的模板。
它不能用用戶自建的模板構(gòu)建項(xiàng)目，而自建模板對企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的。
而要注意的是這些限制是故意設(shè)計的，這有它的優(yōu)勢。例如，如果你的項(xiàng)目需求非常簡單，你就不需要自定義生成過程。你能把它作為一個依賴來更新。如果閱讀更多關(guān)于不同的設(shè)計理念。
React 學(xué)習(xí)曲線陡峭，在你開始學(xué) React 前，你需要知道 JSX 和 ES2015，因?yàn)樵S多示例用的是這些語法。你需要學(xué)習(xí)構(gòu)建系統(tǒng)，雖然你在技術(shù)上可以用 Babel 來實(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ā)者只需不到一天的時間閱讀指南就可以建立簡單的應(yīng)用程序。
本地渲染
ReactNative 能使你用相同的組件模型編寫有本地渲染能力的 APP（IOS 和 Android）。能同時跨多平臺開發(fā)，對開發(fā)者是非常棒的。相應(yīng)地，Vue 和Weex會進(jìn)行官方合作，Weex 是阿里的跨平臺用戶界面開發(fā)框架，Weex 的 JavaScript 框架運(yùn)行時用的就是 Vue。這意味著在 Weex 的幫助下，你使用 Vue 語法開發(fā)的組件不僅僅可以運(yùn)行在瀏覽器端，還能被用于開發(fā) IOS 和 Android 上的原生應(yīng)用。
在現(xiàn)在，Weex 還在積極發(fā)展，成熟度也不能和 ReactNative 相抗衡。但是，Weex 的發(fā)展是由世界上最大的電子商務(wù)企業(yè)的需求在驅(qū)動，Vue 團(tuán)隊也會和 Weex 團(tuán)隊積極合作確保為開發(fā)者帶來良好的開發(fā)體驗(yàn)。
MobX
Mobx 在 React 社區(qū)很流行，實(shí)際上在 Vue 也采用了幾乎相同的反應(yīng)系統(tǒng)。在有限程度上，React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue，所以如果你習(xí)慣組合使用它們，那么選擇 Vue 會更合理。
對比Angular 1
Vue 的一些語法和 Angular 的很相似（例如v-ifvsng-if）。因?yàn)?b>Angular 是 Vue 早期開發(fā)的靈感來源。然而，Augular 中存在的許多問題，在 Vue 中已經(jīng)得到解決。
在 API 與設(shè)計兩方面上 Vue.js 都比 Angular 1 簡單得多，因此你可以快速地掌握它的全部特性并投入開發(fā)。
Vue.js 是一個更加靈活開放的解決方案。它允許你以希望的方式組織應(yīng)用程序，而不是在任何時候都必須遵循 Angular 1 制定的規(guī)則，這讓 Vue 能適用于各種項(xiàng)目。我們知道把決定權(quán)交給你是非常必要的。
這也就是為什么我們提供Webpack template，讓你可以用幾分鐘，去選擇是否啟用高級特性，比如熱模塊加載、linting、CSS 提取等等。
Angular 1 使用雙向綁定，Vue 在不同組件間強(qiáng)制使用單向數(shù)據(jù)流。這使應(yīng)用中的數(shù)據(jù)流更加清晰易懂。
在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中兩者有不少相混的地方。
Vue 有更好的性能，并且非常非常容易優(yōu)化，因?yàn)樗皇褂门K檢查。
在 Angular 1 中，當(dāng) watcher 越來越多時會變得越來越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計算。并且，如果一些 watcher 觸發(fā)另一個更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。Angular 用戶常常要使用深奧的技術(shù)，以解決臟檢查循環(huán)的問題。有時沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域。
Vue 則根本沒有這個問題，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步隊列更新，所有的數(shù)據(jù)變化都是獨(dú)立觸發(fā)，除非它們之間有明確的依賴關(guān)系。
有意思的是，Angular 2 和 Vue 用相似的設(shè)計解決了一些 Angular 1 中存在的問題。
對比 Angular 2
我們單獨(dú)將 Augluar 2 作分類，因?yàn)樗耆且粋€全新的框架。例如：它具有優(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)常會被引用，它對那些喜歡用 Java 或者 C# 等類型安全的語言的人是非常有用的。
Vue 也十分適合制作企業(yè)應(yīng)用，你也可以通過使用官方類型或用戶貢獻(xiàn)的裝飾器來支持 TypeScript，這完全是自由可選的。
在性能方面，這兩個框架都非常的快。但目前尚沒有足夠的數(shù)據(jù)用例來具體展示。如果你一定要量化這些數(shù)據(jù)，你可以查看第三方參照，它表明 Vue 2 相比 Angular2 是更快的。
在大小方面，雖然 Angular 2 使用 tree-shaking 和離線編譯技術(shù)使代碼體積減小了許多。但包含編譯器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 還是要小的多。但是要注意，用 Angular 2 的 App 的體積縮減是使用了 tree-shaking 移除了那些框架中沒有用到的功能，但隨著功能引入的不斷增多，尺寸會變得越來越大。
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個 NPM 依賴包，4 個文件和超過 3 千多字的介紹，這一切都是為了完成個 Hello World。而Vue’s Hello World就非常簡單。甚至我們并不用花費(fèi)一整個頁面去介紹它。
本文“更輕更快的Vue.js 2.0”部分內(nèi)容作者為David Iffland?，譯者為任美芒。
Vue與其他框架的對比參見其官網(wǎng)：http://vuefe.cn/guide/comparison.html#HTML-amp-CSS
