vue對比其餘框架

對比其餘框架

React

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

• 使用 Virtual DOM
• 提供了響應式（Reactive）和組件化（Composable）的視圖組件。
• 將注意力集中保持在覈心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫。

性能簡介

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

渲染性能

在渲染用戶界面時，DOM 操做成本是最高的，不幸的是沒有庫可讓這些原始操做變得更快。
咱們能作到的最好效果就是：

1. 儘可能減小 DOM 操做。Vue 和 React 都使用虛擬 DOM 來實現，而且二者工做的效果同樣好。
2. 儘可能減小除 DOM 操做之外的其餘操做。這是 Vue 和 React 所不一樣的地方。

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

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

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

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

	Vue	React
Fastest	23ms	63ms
Median	42ms	81ms
Average	51ms	94ms
95th Perc.	73ms	164ms
Slowest	343ms	453ms

更新性能

在 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社區審覈過的例子：

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 的渲染功能有下面這些優點：

• 你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。
• 工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的（好比，linting、類型檢查、編輯器的自動完成）。

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

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

<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>

優勢以下：

• 在寫模板的過程當中，樣式風格已定並涉及更少的功能實現。
• 模板老是會被聲明的。
• 模板中任何 HTML 語法都是有效的。
• 閱讀起來更貼合英語（好比，for each item in items）。
• 不須要高級版本的 JavaScript 語法，來增長可讀性。

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

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

React 生態也有一個項目容許你寫模板，可是存在一些缺點：

• 功能遠沒有 Vue 模板系統豐富。
• 須要從組件文件中分離出 HTML 代碼。
• 這是個第三方庫，而非官方支持，可能將來核心庫更新就再也不支持。

CSS 的組件做用域

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

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

<style scoped> @media (min-width: 250px) { .list-container:hover { background: orange; } } </style>

這個可選 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。你只要把以下標籤放到頁面就能夠運行：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

而後你就能夠編寫 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-if vs ng-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就很是簡單。甚至咱們並不用花費一整個頁面去介紹它。

Ember

Ember 是一個全能框架。它提供了大量的約定，一旦你熟悉了它們，開發會變得很高效。不過，這也意味着學習曲線較高，並且並不靈活。這意味着在框架和庫（加上一系列鬆散耦合的工具）之間作權衡選擇。後者會更自由，可是也要求你作更多架構上的決定。

也就是說，咱們最比如較的是 Vue 內核和 Ember 的模板與數據模型層：

• Vue 在普通 JavaScript 對象上創建響應，提供自動化的計算屬性。在 Ember 中須要將全部東西放在 Ember 對象內，而且手工爲計算屬性聲明依賴。

• Vue 的模板語法能夠用全功能的 JavaScript 表達式，而 Handlebars 的語法和幫助函數相比來講很是受限。

• 在性能上，Vue 甩開 Ember 幾條街，即便是 Ember 2.0 的最新 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 是極少的。
• 更多成熟工具的支持。Vue 提供官方支持Webpack、Browserify和SystemJS，而 Riot 是依靠社區來創建集成系統。
• 過渡效果系統。Riot 如今尚未提供。
• 更好的性能。Riot 儘管聲稱其使用了虛擬 DOM，但實際上用的仍是髒檢查機制，所以和 Angular 1 患有相同的性能問題。

---

原文：http://vuejs.org/guide/comparison.html