Vue.js 2.0 對(duì)比其他框架

React

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

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

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

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

性能簡(jiǎn)介

到目前為止，針對(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 的操作成本是最高的，不幸的是沒(méi)有庫(kù)可以讓這些原始操作變得更快。我們能做到的最好效果就是：

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

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

Vue 和 React 也提供功能性組件，這些組件因?yàn)槎际菦](méi)有聲明，沒(méi)有實(shí)例化的，因此會(huì)花費(fèi)更少的開(kāi)銷。當(dāng)這些都用于關(guān)鍵性能的場(chǎng)景時(shí)，Vue 將會(huì)更快。為了證明這點(diǎn)，我們建立了一個(gè)簡(jiǎn)單的參照項(xiàng)目，它負(fù)責(zé)渲染 10,000 個(gè)列表項(xiàng) 100 次。我們鼓勵(lì)你基于此去嘗試運(yùn)行一下。然而在實(shí)際上，由于瀏覽器和硬件的差異甚至 JavaScript 引擎的不同，結(jié)果都會(huì)相應(yīng)有所不同。

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

更新性能

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

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

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

開(kāi)發(fā)中

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

然而，假如你要開(kāi)發(fā)一個(gè)對(duì)性能要求比較高的數(shù)據(jù)可視化或者動(dòng)畫(huà)的應(yīng)用時(shí)，你需要了解到下面這點(diǎn)：在開(kāi)發(fā)中，Vue 每秒最高處理 10 幀，而 React 每秒最高處理不到 1 幀。

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

這是由于 React 有大量的檢查機(jī)制，這會(huì)讓它提供許多有用的警告和錯(cuò)誤提示信息。我們同樣認(rèn)為這些是很重要的，但是我們?cè)趯?shí)現(xiàn)這些檢查時(shí)，也更加密切地關(guān)注了性能方面。

HTML & CSS

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

JSX vs Templates

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

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)勢(shì)：

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

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

在這方面，我們提供的是更簡(jiǎn)單的模板：

<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)點(diǎn)如下：

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

這樣，不僅開(kāi)發(fā)人員更容易編寫(xiě)代碼，設(shè)計(jì)人員和開(kāi)發(fā)人員也可以更容易的分析代碼和貢獻(xiàn)代碼。

這還沒(méi)有結(jié)束。Vue 擁抱 HTML，而不是用 JavaScript 去重塑它。在模板內(nèi)，Vue 也允許你用預(yù)處理器比如 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 的組件作用域

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

而 Vue 可以讓你在每個(gè)單文件組件中完全訪問(wèn) CSS。

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

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

最后，就像 HTML 一樣，你可以選擇自己偏愛(ài)的 CSS 預(yù)處理器編寫(xiě) CSS。這可以讓你圍繞設(shè)計(jì)為中心展開(kāi)工作，而不是引入專門(mén)的庫(kù)來(lái)增加你應(yīng)用的體積和復(fù)雜度。

規(guī)模

向上擴(kuò)展

Vue 和 React 都提供了強(qiáng)大的路由來(lái)應(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 相信能為你帶來(lái)更好的開(kāi)發(fā)體驗(yàn)。

兩者另一個(gè)重要差異是，Vue 的路由庫(kù)和狀態(tài)管理庫(kù)都是由官方維護(hù)支持且與核心庫(kù)同步更新的。React 則是選擇把這些問(wèn)題交給社區(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è)面應(yīng)用的單一模板，而 Vue 提供了各種用途的模板。
• 它不能用用戶自建的模板構(gòu)建項(xiàng)目，而自建模板對(duì)企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的。

而要注意的是這些限制是故意設(shè)計(jì)的，這有它的優(yōu)勢(shì)。例如，如果你的項(xiàng)目需求非常簡(jiǎn)單，你就不需要自定義生成過(guò)程。你能把它作為一個(gè)依賴來(lái)更新。如果閱讀更多關(guān)于不同的設(shè)計(jì)理念。

向下擴(kuò)展

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

就像 Vue 向上擴(kuò)展好比 React 一樣，Vue 向下擴(kuò)展后就類似于 jQuery。你只要把如下標(biāo)簽放到頁(yè)面就可以運(yùn)行：

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

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

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

本地渲染

ReactNative 能使你用相同的組件模型編寫(xiě)有本地渲染能力的 APP（IOS 和 Android）。能同時(shí)跨多平臺(tái)開(kāi)發(fā)，對(duì)開(kāi)發(fā)者是非常棒的。相應(yīng)地，Vue 和 Weex 會(huì)進(jìn)行官方合作，Weex 是阿里的跨平臺(tái)用戶界面開(kāi)發(fā)框架，Weex 的 JavaScript 框架運(yùn)行時(shí)用的就是 Vue。這意味著在 Weex 的幫助下，你使用 Vue 語(yǔ)法開(kāi)發(fā)的組件不僅僅可以運(yùn)行在瀏覽器端，還能被用于開(kāi)發(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ì)積極合作確保為開(kāi)發(fā)者帶來(lái)良好的開(kāi)發(fā)體驗(yàn)。

MobX

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

Angular 1

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

復(fù)雜性

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

靈活性和模塊化

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

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

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 越來(lái)越多時(shí)會(huì)變得越來(lái)越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。Angular 用戶常常要使用深?yuàn)W的技術(shù)，以解決臟檢查循環(huán)的問(wèn)題。有時(shí)沒(méi)有簡(jiǎn)單的辦法來(lái)優(yōu)化有大量 watcher 的作用域。

Vue 則根本沒(méi)有這個(gè)問(wèn)題，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步隊(duì)列更新，所有的數(shù)據(jù)變化都是獨(dú)立觸發(fā)，除非它們之間有明確的依賴關(guān)系。

有意思的是，Angular 2 和 Vue 用相似的設(shè)計(jì)解決了一些 Angular 1 中存在的問(wèn)題。

Angular 2

我們單獨(dú)將 Augluar 2 作分類，因?yàn)樗耆且粋€(gè)全新的框架。例如：它具有優(yōu)秀的組件系統(tǒng)，并且許多實(shí)現(xiàn)已經(jīng)完全重寫(xiě)，API 也完全改變了。

TypeScript

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

Vue 也十分適合制作企業(yè)應(yīng)用，你也可以通過(guò)使用官方類型或用戶貢獻(xiàn)的裝飾器來(lái)支持 TypeScript，這完全是自由可選的。

大小和性能

在性能方面，這兩個(gè)框架都非常的快。但目前尚沒(méi)有足夠的數(shù)據(jù)用例來(lái)具體展示。如果你一定要量化這些數(shù)據(jù)，你可以查看第三方參照，它表明 Vue 2 相比 Angular2 是更快的。

在大小方面，雖然 Angular 2 使用 tree-shaking 和離線編譯技術(shù)使代碼體積減小了許多。但包含編譯器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 還是要小的多。但是要注意，用 Angular 2 的 App 的體積縮減是使用了 tree-shaking 移除了那些框架中沒(méi)有用到的功能，但隨著功能引入的不斷增多，尺寸會(huì)變得越來(lái)越大。

靈活性

Vue 相比于 Angular 2 則更加靈活，Vue 官方提供了構(gòu)建工具來(lái)協(xié)助你構(gòu)建項(xiàng)目，但它并不限制你去如何構(gòu)建。有人可能喜歡用統(tǒng)一的方式來(lái)構(gòu)建，也有很多開(kāi)發(fā)者喜歡這種靈活自由的方式。

學(xué)習(xí)曲線

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

Angular 2 的學(xué)習(xí)曲線是非常陡峭的。即使不包括 TypeScript，它的開(kāi)始指南中所用的就有 ES2015 標(biāo)準(zhǔn)的 JavaScript，18個(gè) NPM 依賴包，4 個(gè)文件和超過(guò) 3 千多字的介紹，這一切都是為了完成個(gè) Hello World。而Vue’s Hello World就非常簡(jiǎn)單。甚至我們并不用花費(fèi)一整個(gè)頁(yè)面去介紹它。

Ember

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

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

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

Knockout

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

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

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

Polymer

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

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

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

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

而 Vue 和 Web Component 標(biāo)準(zhǔn)進(jìn)行深層次的整合也是完全可行的，比如使用 Custom Elements、Shadow DOM 的樣式封裝。然而在我們做出嚴(yán)肅的實(shí)現(xiàn)承諾之前，我們目前仍在等待相關(guān)標(biāo)準(zhǔn)成熟，進(jìn)而再?gòu)V泛應(yīng)用于主流的瀏覽器中。

Riot

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

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