更輕更快的Vue.js 2.0與其餘框架對比(轉)

更輕更快的Vue.js 2.0

嶄露頭角的JavaScript框架Vue.js 2.0版本已經發布，在狂熱的JavaScript世界裏帶來了讓人耳目一新的變化。

Vue建立者尤雨溪稱，Vue 2.0 在性能上有顯著的提高，同時保持輕量的文件下載：

渲染層基於一個輕量級的Virtual DOM實現進行了重寫，該Virtual DOM實現fork自snabbdom。新的渲染層相比v1帶來了巨大的性能提高，也讓Vue 2.0成爲了最快速的框架之一。

根據1.0到2.0遷移指南，「大約90％的API是相同的」。不一樣於一些JavaScript框架，從一個版本到下一個版本會有巨大的變化，在Vue 2.0中「核心概念沒有改變」。

除了核心庫，vue-router和vuex庫已經更新到2.0版本，vue-cli已經默認生成了 2.0 的腳手架。

在Vue 2.0第一次宣佈發佈時，尤雨溪說過濾器要離開了。然而隨着時間的推移，這個立場改變了，Vue 2.0中仍然保留了文本插入過濾器。的確，在使用指南過濾器這一章節也指明瞭「Vue 2.x中過濾器僅能在mustache內部綁定使用。要在指令綁定中實現相同的行爲，應該使用計算屬性。」框架再也不提供任何內置過濾器，而且數組過濾器（削減了基於標準的數組）也已經取消了。

由於Vue主要不是由大型技術公司建立的，尤雨溪採起了不一樣的融資方式。尤雨溪可以在這個項目全職工做要感謝Patreon，在Patreon上尤雨溪設置的贊助方式是每個月保證必定數量的金額。截至發稿時，Patreon每個月爲Vue的可持續發展贊助8853美圓。除了尤雨溪以外，Vue.js核心團隊還有18我的。

社區裏大可能是積極的迴應，「Vue比ng2更簡潔」以及「我發現Vue 2.0介於Angular 1和React之間。它是現代化的而且很容易學習和使用」。

Vue在官網上發佈了對比指南（http://vuefe.cn/guide/comparison.html），展現了它與其餘框架的不一樣之處，本文摘錄其與如Angular和React對比。

對比 React

---

React 和 Vue 有許多類似之處，它們都有：

使用 Virtual DOM

提供了響應式（Reactive）和組件化（Composable）的視圖組件。

將注意力集中保持在覈心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫。

因爲有着衆多的類似處，咱們會用更多的時間在這一塊進行比較。這裏咱們不僅保證技術內容的準確性，同時也兼顧了平衡的考量。咱們須要指出 React 比 Vue 更好的地方，像是他們的生態系統和豐富的自定義渲染器。

React社區爲咱們準確進行平衡的考量提供了很是積極地幫助，特別感謝來自 React 團隊的 Dan Abramov 。他很是慷慨的花費時間來貢獻專業知識，幫助咱們完善這篇文檔，最後咱們對最終結果都十分滿意。

有了上面這些內容，咱們但願你能對下面這兩個庫的比較內容的公正性感到放心。

 

性能簡介

到目前爲止，針對現實狀況的測試中，Vue 的性能是優於 React 的。若是你對此表示懷疑，請繼續閱讀。咱們會解釋爲何會這樣（而且會提供一個與 React 團隊共同約定的比較基準）。

渲染性能

在渲染用戶界面的時候，DOM 的操做成本是最高的，不幸的是沒有庫可讓這些原始操做變得更快。

咱們能作到的最好效果就是：

儘可能減小 DOM 操做。Vue 和 React 都使用虛擬 DOM 來實現，而且二者工做的效果同樣好。

儘可能減小除 DOM 操做之外的其餘操做。這是 Vue 和 React 所不一樣的地方。

在 React 中，咱們設定渲染一個元素的額外開銷是 1，而平均渲染一個組件的開銷是 2。那麼在 Vue 中，一個元素的開銷更像是 0.1，可是平均組件的開銷將會是 4，這是因爲咱們須要設定響應系統所致使的。

這意味着：在典型的應用中，因爲須要渲染的元素比組件的數量是更多的，所以 Vue 的性能表現將會遠優於 React。然而，在極端狀況下，好比每一個組件只渲染一個元素，Vue 就會一般更慢一些。固然接下來還有其餘的緣由。

Vue 和 React 也提供功能性組件，這些組件由於都是沒有聲明，沒有實例化的，所以會花費更少的開銷。當這些都用於關鍵性能的場景時，Vue 將會更快。爲了證實這點，咱們創建了一個簡單的參照項目（https://github.com/chrisvfritz/vue-render-performance-comparisons），它負責渲染 10,000 個列表項 100 次。咱們鼓勵你基於此去嘗試運行一下。然而在實際上，因爲瀏覽器和硬件的差別甚至 JavaScript 引擎的不一樣，結果都會相應有所不一樣。

若是你懶得去作，下面的數值是來自於一個 2014 年產的 MacBook Air 並在 Chrome 52 版本下運行所產生的。爲了不偶然性，每一個參照項目都分別運行 20 次並取自最好的結果：

VueReact

Fastest23ms63ms

Median42ms81ms

Average51ms94ms

95th Perc.73ms164ms

Slowest343ms453ms

更新性能

在 React 中，你須要在到處去實現shouldComponentUpdate，而且用不可變數據結構才能實現最優化的渲染。在 Vue 中，組件的依賴被自動追蹤，因此當這些依賴項變更時，它纔會更新。惟一須要注意的可能須要進一步優化的一點是在長列表中，須要在每項上添加一個key屬性。

這意味着，未經優化的 Vue 相比未經優化的 React 要快的多。因爲 Vue 改進過渲染性能，甚至全面優化過的 React 一般也會慢於開箱即用的 Vue。

開發中

顯然，在生產環境中的性能是相當重要的，目前爲止咱們所具體討論的即是針對此環境。但開發過程當中的表現也不容小視。不錯的是用 Vue 和 React 開發大多數應用的速度都是足夠快的。

然而，假如你要開發一個對性能要求比較高的數據可視化或者動畫的應用時，你須要瞭解到下面這點：在開發中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。

這是因爲 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。咱們一樣認爲這些是很重要的，可是咱們在實現這些檢查時，也更加密切地關注了性能方面。

 

HTML & CSS

在 React 中，它們都是 JavaScript 編寫的，聽起來這十分簡單和優雅。然而不幸的事實是，JavaScript 內的 HTML 和 CSS 會產生不少痛點。在Vue 中咱們採用 Web 技術並在其上進行擴展。接下來將經過一些實例向你展現這意味的是什麼。

JSX vs Templates

在 React 中，全部的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 Javascript 的一種語法糖。這有一個經過React社區審覈過的例子：

JSX 的渲染功能有下面這些優點：

你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。

工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的（好比，linting、類型檢查、編輯器的自動完成）。

在 Vue 中，因爲有時須要用這些功能，咱們也提供了渲染功能而且支持了 JSX。然而，對於大多數組件來講，渲染功能是不推薦使用了。

在這方面，咱們提供的是更簡單的模板：

優勢以下：

在寫模板的過程當中，樣式風格已定並涉及更少的功能實現。

模板老是會被聲明的。

模板中任何 HTML 語法都是有效的。

閱讀起來更貼合英語（好比，for each item in items）。

不須要高級版本的 JavaScript 語法，來增長可讀性。

這樣，不只開發人員更容易編寫代碼，設計人員和開發人員也能夠更容易的分析代碼和貢獻代碼。

這尚未結束。Vue 擁抱 HTML，而不是用 JavaScript 去重塑它。在模板內，Vue 也容許你用預處理器好比 Pug（原名 Jade）。

React 生態也有一個項目(https://wix.github.io/react-templates/)容許你寫模板，可是存在一些缺點：

功能遠沒有 Vue 模板系統豐富。

須要從組件文件中分離出 HTML 代碼。

這是個第三方庫，而非官方支持，可能將來核心庫更新就再也不支持。

CSS 的組件做用域

除非你把組件分佈在多個文件上(例如CSS Modules)，要不在 React 中做用域內的 CSS 就會產生警告。很是簡單的 CSS 還能夠工做，可是稍微複雜點的，好比懸停狀態、媒體查詢、僞類選擇符等要麼經過沉重的依賴來重作要麼就直接不能用。

而 Vue 可讓你在每一個單文件組件中徹底訪問 CSS。

這個可選scoped屬性會自動添加一個惟一的屬性（好比data-v-1）爲組件內 CSS 指定做用域，編譯的時候.list-container:hover會被編譯成相似.list-container[data-v-1]:hover。

最後，就像 HTML 同樣，你能夠選擇本身偏心的 CSS 預處理器編寫 CSS。這可讓你圍繞設計爲中心展開工做，而不是引入專門的庫來增長你應用的體積和複雜度。

 

規模

向上擴展

Vue 和 React 都提供了強大的路由來應對大型應用。React 社區在狀態管理方面很是有創新精神（好比Flux、Redux），而這些狀態管理模式甚至 Redux 自己也能夠很是容易的集成在 Vue 應用中。實際上，Vue 更進一步地採用了這種模式（Vuex），更加深刻集成 Vue 的狀態管理解決方案 Vuex 相信能爲你帶來更好的開發體驗。

二者另外一個重要差別是，Vue 的路由庫和狀態管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區維護，所以建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。

最後，Vue 提供了Vue-cli 腳手架，能讓你很是容易地構建項目，包含了 Webpack, Browserify, 甚至 no build system。React 在這方面也提供了create-react-app，可是如今還存在一些侷限性：

它不容許在項目生成時進行任何配置，而 Vue 支持 Yeoman-like 定製。

它只提供一個構建單頁面應用的單一模板，而 Vue 提供了各類用途的模板。

它不能用用戶自建的模板構建項目，而自建模板對企業環境下預先創建協議是特別有用的。

而要注意的是這些限制是故意設計的，這有它的優點。例如，若是你的項目需求很是簡單，你就不須要自定義生成過程。你能把它做爲一個依賴來更新。若是閱讀更多關於不一樣的設計理念。

向下擴展

React 學習曲線陡峭，在你開始學 React 前，你須要知道 JSX 和 ES2015，由於許多示例用的是這些語法。你須要學習構建系統，雖然你在技術上能夠用 Babel 來實時編譯代碼，可是這並不推薦用於生產環境。

就像 Vue 向上擴展比如 React 同樣，Vue 向下擴展後就相似於 jQuery。你只要把以下標籤放到頁面就能夠運行：

而後你就能夠編寫 Vue 代碼並應用到生產中，你只要用 min 版 Vue 文件替換掉就不用擔憂其餘的性能問題。

因爲起步階段不需學 JSX，ES2015 以及構建系統，因此開發者只需不到一天的時間閱讀指南就能夠創建簡單的應用程序。

 

本地渲染

ReactNative 能使你用相同的組件模型編寫有本地渲染能力的 APP（IOS 和 Android）。能同時跨多平臺開發，對開發者是很是棒的。相應地，Vue 和Weex會進行官方合做，Weex 是阿里的跨平臺用戶界面開發框架，Weex 的 JavaScript 框架運行時用的就是 Vue。這意味着在 Weex 的幫助下，你使用 Vue 語法開發的組件不只僅能夠運行在瀏覽器端，還能被用於開發 IOS 和 Android 上的原生應用。

在如今，Weex 還在積極發展，成熟度也不能和 ReactNative 相抗衡。可是，Weex 的發展是由世界上最大的電子商務企業的需求在驅動，Vue 團隊也會和 Weex 團隊積極合做確保爲開發者帶來良好的開發體驗。

 

MobX

Mobx 在 React 社區很流行，實際上在 Vue 也採用了幾乎相同的反應系統。在有限程度上，React + Mobx 也能夠被認爲是更繁瑣的 Vue，因此若是你習慣組合使用它們，那麼選擇 Vue 會更合理。

對比Angular 1

---

Vue 的一些語法和 Angular 的很類似（例如v-ifvsng-if）。由於Angular 是 Vue 早期開發的靈感來源。然而，Augular 中存在的許多問題，在 Vue 中已經獲得解決。

複雜性

在 API 與設計兩方面上 Vue.js 都比 Angular 1 簡單得多，所以你能夠快速地掌握它的所有特性並投入開發。

靈活性和模塊化

Vue.js 是一個更加靈活開放的解決方案。它容許你以但願的方式組織應用程序，而不是在任什麼時候候都必須遵循 Angular 1 制定的規則，這讓 Vue 能適用於各類項目。咱們知道把決定權交給你是很是必要的。

這也就是爲何咱們提供Webpack template，讓你能夠用幾分鐘，去選擇是否啓用高級特性，好比熱模塊加載、linting、CSS 提取等等。

數據綁定

Angular 1 使用雙向綁定，Vue 在不一樣組件間強制使用單向數據流。這使應用中的數據流更加清晰易懂。

指令與組件

在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯。在 Angular 中二者有很多相混的地方。

性能

Vue 有更好的性能，而且很是很是容易優化，由於它不使用髒檢查。

在 Angular 1 中，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環（digest cycle）可能要運行屢次。Angular 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。

Vue 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步隊列更新，全部的數據變化都是獨立觸發，除非它們之間有明確的依賴關係。

有意思的是，Angular 2 和 Vue 用類似的設計解決了一些 Angular 1 中存在的問題。

對比 Angular 2

---

咱們單獨將 Augluar 2 做分類，由於它徹底是一個全新的框架。例如：它具備優秀的組件系統，而且許多實現已經徹底重寫，API 也徹底改變了。

TypeScript

Angular 1 面向的是較小的應用程序，Angular 2 已轉移焦點，面向的是大型企業應用。在這一點上 TypeScript 常常會被引用，它對那些喜歡用 Java 或者 C# 等類型安全的語言的人是很是有用的。

Vue 也十分適合製做企業應用，你也能夠經過使用官方類型或用戶貢獻的裝飾器來支持 TypeScript，這徹底是自由可選的。

大小和性能

在性能方面，這兩個框架都很是的快。但目前尚沒有足夠的數據用例來具體展現。若是你必定要量化這些數據，你能夠查看第三方參照，它代表 Vue 2 相比 Angular2 是更快的。

在大小方面，雖然 Angular 2 使用 tree-shaking 和離線編譯技術使代碼體積減少了許多。但包含編譯器和所有功能的 Vue2(23kb) 相比 Angular 2(50kb) 仍是要小的多。可是要注意，用 Angular 2 的 App 的體積縮減是使用了 tree-shaking 移除了那些框架中沒有用到的功能，但隨着功能引入的不斷增多，尺寸會變得愈來愈大。

靈活性

Vue 相比於 Angular 2 則更加靈活，Vue 官方提供了構建工具來協助你構建項目，但它並不限制你去如何構建。有人可能喜歡用統一的方式來構建，也有不少開發者喜歡這種靈活自由的方式。

學習曲線

開始使用 Vue，你使用的是熟悉的 HTML、符合 ES5 規則的 JavaScript（也就是純 JavaScript）。有了這些基本的技能，你能夠快速地掌握它(指南)並投入開發 。

Angular 2 的學習曲線是很是陡峭的。即便不包括 TypeScript，它的開始指南中所用的就有 ES2015 標準的 JavaScript，18個 NPM 依賴包，4 個文件和超過 3 千多字的介紹，這一切都是爲了完成個 Hello World。而Vue’s Hello World就很是簡單。甚至咱們並不用花費一整個頁面去介紹它。