Vue.js 2.0 對比其他框架

React

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

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

由于有著眾多的相似處，我們會用更多的時間在這一塊進行比較。這里我們不只保證技術(shù)內(nèi)容的準確性，同時也兼顧了平衡的考量。我們需要指出 React 比 Vue 更好的地方，像是他們的生態(tài)系統(tǒng)和豐富的自定義渲染器。

React社區(qū)為我們準確進行平衡的考量提供了非常積極地幫助，特別感謝來自 React 團隊的 Dan Abramov 。他非?？犊幕ㄙM時間來貢獻專業(yè)知識，幫助我們完善這篇文檔，最后我們對最終結(jié)果都十分滿意。

性能簡介

到目前為止，針對現(xiàn)實情況的測試中，Vue 的性能是優(yōu)于 React 的。如果你對此表示懷疑，請繼續(xù)閱讀。我們會解釋為什么會這樣（并且會提供一個與 React 團隊共同約定的比較基準）。

渲染性能

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

1. 盡量減少必要的DOM突變數(shù)量。 React和Vue都使用虛擬DOM抽象來實現(xiàn)這一點，并且兩個實現(xiàn)都同樣有效。
2. 在這些DOM操作之上添加盡可能少的開銷（純JavaScript計算）。 這是Vue和React不同的區(qū)域。
   

JavaScript開銷與計算必要的DOM操作的機制直接相關。Vue和React都利用Virtual DOM來實現(xiàn)這一目標，但是Vue的Virtual DOM實現(xiàn)（snabbdom的分支）要輕得多，因此比React的開銷更少。

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

如果你懶得去做，下面的數(shù)值是來自于一個 2014 年產(chǎn)的 MacBook Air 并在 Chrome 52 版本下運行所產(chǎn)生的。為了避免偶然性，每個參照項目都分別運行 20 次并取自最好的結(jié)果：

更新性能

在React中，當組件的狀態(tài)發(fā)生更改時，它會觸發(fā)整個組件子樹的重新呈現(xiàn)，從該組件以root身份開始。

為避免對子組件進行不必要的重新渲染，您需要在任何地方實現(xiàn)shouldComponentUpdate并使用不可變數(shù)據(jù)結(jié)構(gòu)。在Vue中，組件的依賴關系在渲染過程中會自動跟蹤，因此系統(tǒng)會精確地知道實際需要重新渲染的組件。

這意味著，未經(jīng)優(yōu)化的 Vue 相比未經(jīng)優(yōu)化的 React 要快的多。由于 Vue 改進過渲染性能，甚至全面優(yōu)化過的 React 通常也會慢于開箱即用的 Vue。

開發(fā)中

顯然，在生產(chǎn)環(huán)境中的性能是至關重要的，目前為止我們所具體討論的便是針對此環(huán)境。但開發(fā)過程中的表現(xiàn)也不容小視。不錯的是用 Vue 和 React 開發(fā)大多數(shù)應用的速度都是足夠快的。

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

對于大多數(shù)普通應用程序，Vue和React在開發(fā)過程中都保持足夠快。但是，在對高幀率數(shù)據(jù)可視化或動畫進行原型設計時，我們已經(jīng)看到Vue在開發(fā)過程中處理每秒10幀的情況，而React則降低到每秒約1幀。

這是由于 React 有大量的檢查機制，這會讓它提供許多有用的警告和錯誤提示信息。我們同樣認為這些是很重要的，但是我們在實現(xiàn)這些檢查時，也更加密切地關注了性能方面。

HTML & CSS

在 React 中，它們都是 JavaScript 編寫的，聽起來這十分簡單和優(yōu)雅。然而不幸的事實是，JavaScript 內(nèi)的 HTML 和 CSS 會產(chǎn)生很多痛點。在 Vue 中我們采用 Web 技術(shù)并在其上進行擴展。接下來將通過一些實例向你展示這意味的是什么。

JSX vs Templates

在 React 中，所有的組件的渲染功能都依靠 JSX。JSX 是使用 XML 語法編寫 Javascript 的一種語法糖。這有一個通過React社區(qū)審核過的例子：

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)勢：

• 你可以使用完整的編程語言 JavaScript 功能來構(gòu)建你的視圖頁面。
• 工具對 JSX 的支持相比于現(xiàn)有可用的其他 Vue 模板還是比較先進的（比如，linting、類型檢查、編輯器的自動完成）。

在 Vue 中，由于有時需要用這些功能，我們也提供了渲染功能并且支持了 JSX。然而，對于大多數(shù)組件來說，渲染功能是不推薦使用了。

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

<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)點如下：

• 在寫模板的過程中，樣式風格已定并涉及更少的功能實現(xiàn)。
• 模板總是會被聲明的。
• 模板中任何 HTML 語法都是有效的。
• 閱讀起來更貼合英語（比如，for each item in items）。
• 不需要高級版本的 JavaScript 語法，來增加可讀性。

這樣，不僅開發(fā)人員更容易編寫代碼，設計人員和開發(fā)人員也可以更容易的分析代碼和貢獻代碼。

這還沒有結(jié)束。Vue 擁抱 HTML，而不是用 JavaScript 去重塑它。在模板內(nèi)，Vue 也允許你用預處理器比如 Pug（原名 Jade）。

div.list-container
  ul(v-if="items.length")
    li(v-for="item in items") {{ item.name }}
  p(v-else) No items found

CSS 的組件作用域

除非你把組件分布在多個文件上(例如 CSS Modules)，要不在 React 中作用域內(nèi)的 CSS 就會產(chǎn)生警告。非常簡單的 CSS 還可以工作，但是稍微復雜點的，比如懸停狀態(tài)、媒體查詢、偽類選擇符等要么通過沉重的依賴來重做要么就直接不能用。

而 Vue 可以讓你在每個單文件組件中完全訪問 CSS。

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

這個可選 scoped 屬性會自動添加一個唯一的屬性（比如 data-v-21e5b78）為組件內(nèi) CSS 指定作用域，編譯的時候 .list-container:hover 會被編譯成類似 .list-container[data-v-21e5b78]:hover。

最后，就像 HTML 一樣，你可以選擇自己偏愛的 CSS 預處理器編寫 CSS。這可以讓你圍繞設計為中心展開工作，而不是引入專門的庫來增加你應用的體積和復雜度。

規(guī)模

向上擴展

Vue 和 React 都提供了強大的路由來應對大型應用。React 社區(qū)在狀態(tài)管理方面非常有創(chuàng)新精神（比如Flux、Redux），而這些狀態(tài)管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 應用中。實際上，Vue 更進一步地采用了這種模式（Vuex），更加深入集成 Vue 的狀態(tài)管理解決方案 Vuex 相信能為你帶來更好的開發(fā)體驗。

兩者另一個重要差異是，Vue 的路由庫和狀態(tài)管理庫都是由官方維護支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區(qū)維護，因此創(chuàng)建了一個更分散的生態(tài)系統(tǒng)。但相對的，React 的生態(tài)系統(tǒng)相比 Vue 更加繁榮。

最后，Vue 提供了Vue-cli 腳手架，能讓你非常容易地構(gòu)建項目，包含了 Webpack, Browserify, 甚至 no build system。React 在這方面也提供了create-react-app，但是現(xiàn)在還存在一些局限性：

• 它不允許在項目生成時進行任何配置，而 Vue 支持 Yeoman-like 定制。
• 它只提供一個構(gòu)建單頁面應用的單一模板，而 Vue 提供了各種用途的模板。
• 它不能用用戶自建的模板構(gòu)建項目，而自建模板對企業(yè)環(huán)境下預先建立協(xié)議是特別有用的。

而要注意的是這些限制是故意設計的，這有它的優(yōu)勢。例如，如果你的項目需求非常簡單，你就不需要自定義生成過程。你能把它作為一個依賴來更新。如果閱讀更多關于不同的設計理念。

向下擴展

React 學習曲線陡峭，在你開始學 React 前，你需要知道 JSX 和 ES2015，因為許多示例用的是這些語法。你需要學習構(gòu)建系統(tǒng)，雖然你在技術(shù)上可以用 Babel 來實時編譯代碼，但是這并不推薦用于生產(chǎn)環(huán)境。

就像 Vue 向上擴展好比 React 一樣，Vue 向下擴展后就類似于 jQuery。你只要把如下標簽放到頁面就可以運行：

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

然后你就可以編寫 Vue 代碼并應用到生產(chǎn)中，你只要用 min 版 Vue 文件替換掉就不用擔心其他的性能問題。

由于起步階段不需學 JSX，ES2015 以及構(gòu)建系統(tǒng)，所以開發(fā)者只需不到一天的時間閱讀本教程就可以建立簡單的應用程序。

本地渲染

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

在現(xiàn)在，Weex 還在積極發(fā)展，成熟度也不能和 ReactNative 相抗衡。但是，Weex 的發(fā)展是由世界上最大的電子商務企業(yè)的需求在驅(qū)動，Vue 團隊也會和 Weex 團隊積極合作確保為開發(fā)者帶來良好的開發(fā)體驗。

MobX

Mobx 在 React 社區(qū)很流行，實際上在 Vue 也采用了幾乎相同的反應系統(tǒng)。在有限程度上，React + Mobx 也可以被認為是更繁瑣的 Vue，所以如果你習慣組合使用它們，那么選擇 Vue 會更合理。

Angular 1

Vue 的一些語法和 Angular 的很相似（例如 v-if vs ng-if）。因為 Angular 是 Vue 早期開發(fā)的靈感來源。然而，Augular 中存在的許多問題，在 Vue 中已經(jīng)得到解決。

復雜性

在 API 與設計兩方面上 Vue.js 都比 Angular 1 簡單得多，因此你可以快速地掌握它的全部特性并投入開發(fā)。

靈活性和模塊化

Vue.js 是一個更加靈活開放的解決方案。它允許你以希望的方式組織應用程序，而不是在任何時候都必須遵循 Angular 1 制定的規(guī)則，這讓 Vue 能適用于各種項目。我們知道把決定權(quán)交給你是非常必要的。這也就是為什么我們提供 Webpack template，讓你可以用幾分鐘，去選擇是否啟用高級特性，比如熱模塊加載、linting、CSS 提取等等。

數(shù)據(jù)綁定

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

指令與組件

在 Vue 中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中兩者有不少相混的地方。

性能

Vue 有更好的性能，并且非常非常容易優(yōu)化，因為它不使用臟檢查。

在 Angular 1 中，當 watcher 越來越多時會變得越來越慢，因為作用域內(nèi)的每一次變化，所有 watcher 都要重新計算。并且，如果一些 watcher 觸發(fā)另一個更新，臟檢查循環(huán)（digest cycle）可能要運行多次。Angular 用戶常常要使用深奧的技術(shù)，以解決臟檢查循環(huán)的問題。有時沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域。

Vue 則根本沒有這個問題，因為它使用基于依賴追蹤的觀察系統(tǒng)并且異步隊列更新，所有的數(shù)據(jù)變化都是獨立觸發(fā)，除非它們之間有明確的依賴關系。

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

Angular 2

我們單獨將 Augluar 2 作分類，因為它完全是一個全新的框架。例如：它具有優(yōu)秀的組件系統(tǒng)，并且許多實現(xiàn)已經(jīng)完全重寫，API 也完全改變了。

TypeScript

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

Vue 也十分適合制作企業(yè)應用，你也可以通過使用官方類型或用戶貢獻的裝飾器來支持 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)建項目，但它并不限制你去如何構(gòu)建。有人可能喜歡用統(tǒng)一的方式來構(gòu)建，也有很多開發(fā)者喜歡這種靈活自由的方式。

學習曲線

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

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

Ember

Ember 是一個全能框架。它提供了大量的約定，一旦你熟悉了它們，開發(fā)會變得很高效。不過，這也意味著學習曲線較高，而且并不靈活。這意味著在框架和庫（加上一系列松散耦合的工具）之間做權(quán)衡選擇。后者會更自由，但是也要求你做更多架構(gòu)上的決定。

也就是說，我們最好比較的是 Vue 內(nèi)核和 Ember 的模板與數(shù)據(jù)模型層：

• Vue 在普通 JavaScript 對象上建立響應，提供自動化的計算屬性。在 Ember 中需要將所有東西放在 Ember 對象內(nèi)，并且手工為計算屬性聲明依賴。
• Vue 的模板語法可以用全功能的 JavaScript 表達式，而 Handlebars 的語法和幫助函數(shù)相比來說非常受限。
• 在性能上，Vue 甩開 Ember 幾條街，即使是 Ember 2.0 的最新 Glimmer 引擎。Vue 能夠自動批量更新，而 Ember 在關鍵性能場景時需要手動管理。

Knockout

Knockout 是 MVVM 領域內(nèi)的先驅(qū)，并且追蹤依賴。它的響應系統(tǒng)和 Vue 也很相似。它在瀏覽器支持以及其他方面的表現(xiàn)也是讓人印象深刻的。它最低能支持到 IE6，而 Vue 最低只能支持到 IE9。

隨著時間的推移，Knockout 的發(fā)展已有所放緩，并且略顯有點老舊了。比如，它的組件系統(tǒng)缺少完備的生命周期事件方法，盡管這些在現(xiàn)在是非常常見的。以及相比于 Vue 調(diào)用子組件的接口它的方法顯得有點笨重。

如果你有興趣研究，你還會發(fā)現(xiàn)二者在接口設計的理念上是不同的。這可以通過各自創(chuàng)建的 simple Todo List 體現(xiàn)出來?；蛟S有點主觀，但是很多人認為 Vue 的 API 接口更簡單結(jié)構(gòu)更優(yōu)雅。

Polymer

Polymer 是另一個由谷歌贊助的項目，事實上也是 Vue 的一個靈感來源。Vue 的組件可以粗略的類比于 Polymer 的自定義元素，并且兩者具有相似的開發(fā)風格。最大的不同之處在于，Polymer 是基于最新版的 Web Components 標準之上，并且需要重量級的 polyfills 來幫助工作（性能下降），瀏覽器本身并不支持這些功能。相比而言，Vue 在支持到 IE9 的情況下并不需要依賴 polyfills 來工作，。

在 Polymer 1.0 版本中，為了彌補性能，團隊非常有限的使用數(shù)據(jù)綁定系統(tǒng)。例如，在 Polymer 中唯一支持的表達式只有布爾值否定和單一的方法調(diào)用，它的 computed 方法的實現(xiàn)也并不是很靈活。

Polymer 自定義的元素是用 HTML 文件來創(chuàng)建的，這會限制使用 JavaScript/CSS（和被現(xiàn)代瀏覽器普遍支持的語言特性）。相比之下，Vue 的單文件組件允許你非常容易的使用 ES2015 和你想用的 CSS 預編譯處理器。

在部署生產(chǎn)環(huán)境時，Polymer 建議使用 HTML Imports 加載所有資源。而這要求服務器和客戶端都支持 Http 2.0 協(xié)議，并且瀏覽器實現(xiàn)了此標準。這是否可行就取決于你的目標用戶和部署環(huán)境了。如果狀況不佳，你必須用 Vulcanizer 工具來打包 Polymer 元素。而在這方面，Vue 可以結(jié)合異步組件的特性和 Webpack 的代碼分割特性來實現(xiàn)懶加載（lazy-loaded）。這同時確保了對舊瀏覽器的兼容且又能更快加載。

而 Vue 和 Web Component 標準進行深層次的整合也是完全可行的，比如使用 Custom Elements、Shadow DOM 的樣式封裝。然而在我們做出嚴肅的實現(xiàn)承諾之前，我們目前仍在等待相關標準成熟，進而再廣泛應用于主流的瀏覽器中。

Riot

Riot 2.0 提供了一個類似于基于組件的開發(fā)模型（在 Riot 中稱之為 Tag），它提供了小巧精美的 API。Riot 和 Vue 在設計理念上可能有許多相似處。盡管相比 Riot ，Vue 要顯得重一點，Vue 還是有很多顯著優(yōu)勢的：

• 根據(jù)真實條件來渲染，Riot 根據(jù)是否有分支簡單顯示或隱藏所有內(nèi)容。
• 功能更加強大的路由機制，Riot 的路由功能的 API 是極少的。
• 更多成熟工具的支持。Vue 提供官方支持Webpack、Browserify和SystemJS，而 Riot 是依靠社區(qū)來建立集成系統(tǒng)。
• 過渡效果系統(tǒng)。Riot 現(xiàn)在還沒有提供。
• 更好的性能。Riot 盡管聲稱其使用了虛擬 DOM，但實際上用的還是臟檢查機制，因此和 Angular 1 患有相同的性能問題。