一励幼,vue是什么膀钠?
Vue.js(讀音 /vju?/, 類似于view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架杖刷。與其他重量級(jí)框架不同的是,Vue 采用自底向上增量開發(fā)的設(shè)計(jì)剧包。Vue 的核心庫只關(guān)注視圖層恐锦,并且非常容易學(xué)習(xí),非常容易與其它庫或已有項(xiàng)目整合疆液。另一方面一铅,Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。
Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件堕油。
對(duì)比其他框架
React 和 Vue 有許多相似之處馅闽,它們都有:
使用 Virtual DOM
提供了響應(yīng)式(Reactive)和組件化(Composable)的視圖組件。
將注意力集中保持在核心庫馍迄,伴隨于此,有配套的路由和負(fù)責(zé)處理全局狀態(tài)管理的庫局骤。
由于有著眾多的相似處攀圈,我們會(huì)用更多的時(shí)間在這一塊進(jìn)行比較。這里我們不只保證技術(shù)內(nèi)容的準(zhǔn)確性峦甩,同時(shí)也兼顧了平衡的考量赘来。我們需要指出 React 比 Vue 更好的地方,像是他們的生態(tài)系統(tǒng)和豐富的自定義渲染器凯傲。
React社區(qū)為我們準(zhǔn)確進(jìn)行平衡的考量提供了非常積極地幫助犬辰,特別感謝來自 React 團(tuán)隊(duì)的 Dan Abramov 。他非潮ィ慷慨的花費(fèi)時(shí)間來貢獻(xiàn)專業(yè)知識(shí)幌缝,幫助我們完善這篇文檔,最后我們對(duì)最終結(jié)果都十分滿意诫欠。
到目前為止涵卵,針對(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 的操作成本是最高的,不幸的是沒有庫可以讓這些原始操作變得更快。
我們能做到的最好效果就是:
Minimize the number of necessary DOM mutations. Both React and Vue use virtual DOM abstractions to accomplish this and both implementations work about equally well.
Add as little overhead (pure JavaScript computations) as possible on top of those DOM manipulations. This is an area where Vue and React differ.
The JavaScript overhead is directly related to the mechanisms of computing the necessary DOM operations. Both Vue and React utilizes Virtual DOM to achieve that, but Vue’s Virtual DOM implementation (a fork ofsnabbdom) is much lighter-weight and thus introduces less overhead than React’s.
Vue 和 React 也提供功能性組件昆婿,這些組件因?yàn)槎际菦]有聲明球碉,沒有實(shí)例化的,因此會(huì)花費(fèi)更少的開銷挖诸。當(dāng)這些都用于關(guān)鍵性能的場(chǎng)景時(shí)历谍,Vue 將會(huì)更快。為了證明這點(diǎn)刚照,我們建立了一個(gè)簡單的參照項(xiàng)目送漠,它負(fù)責(zé)渲染 10,000 個(gè)列表項(xiàng) 100 次。我們鼓勵(lì)你基于此去嘗試運(yùn)行一下狼荞。然而在實(shí)際上辽装,由于瀏覽器和硬件的差異甚至 JavaScript 引擎的不同,結(jié)果都會(huì)相應(yīng)有所不同相味。
如果你懶得去做拾积,下面的數(shù)值是來自于一個(gè) 2014 年產(chǎn)的 MacBook Air 并在 Chrome 52 版本下運(yùn)行所產(chǎn)生的。為了避免偶然性丰涉,每個(gè)參照項(xiàng)目都分別運(yùn)行 20 次并取自最好的結(jié)果:
VueReact
Fastest23ms63ms
Median42ms81ms
Average51ms94ms
95th Perc.73ms164ms
Slowest343ms453ms
In React, when a component’s state changes, it triggers the re-render of the entire component sub-tree, starting at that component as root.
To avoid unnecessary re-renders of child components, you need to implementshouldComponentUpdateeverywhere and use immutable data structures. In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render.
這意味著拓巧,未經(jīng)優(yōu)化的 Vue 相比未經(jīng)優(yōu)化的 React 要快的多。由于 Vue 改進(jìn)過渲染性能一死,甚至全面優(yōu)化過的 React 通常也會(huì)慢于開箱即用的 Vue肛度。
顯然,在生產(chǎn)環(huán)境中的性能是至關(guān)重要的投慈,目前為止我們所具體討論的便是針對(duì)此環(huán)境承耿。但開發(fā)過程中的表現(xiàn)也不容小視。不錯(cuò)的是用 Vue 和 React 開發(fā)大多數(shù)應(yīng)用的速度都是足夠快的伪煤。
然而加袋,假如你要開發(fā)一個(gè)對(duì)性能要求比較高的數(shù)據(jù)可視化或者動(dòng)畫的應(yīng)用時(shí),你需要了解到下面這點(diǎn):在開發(fā)中抱既,Vue 每秒最高處理 10 幀职烧,而 React 每秒最高處理不到 1 幀。
Both Vue and React remain fast enough in development for most normal applications. However, when prototyping high frame-rate data visualizations or animations, we’ve seen cases of Vue handling 10 frames per second in development while React dropping to about 1 frame per second.
這是由于 React 有大量的檢查機(jī)制蝙砌,這會(huì)讓它提供許多有用的警告和錯(cuò)誤提示信息阳堕。我們同樣認(rèn)為這些是很重要的,但是我們?cè)趯?shí)現(xiàn)這些檢查時(shí)择克,也更加密切地關(guān)注了性能方面恬总。
在 React 中,它們都是 JavaScript 編寫的肚邢,聽起來這十分簡單和優(yōu)雅壹堰。然而不幸的事實(shí)是拭卿,JavaScript 內(nèi)的 HTML 和 CSS 會(huì)產(chǎn)生很多痛點(diǎn)。在 Vue 中我們采用 Web 技術(shù)并在其上進(jìn)行擴(kuò)展贱纠。接下來將通過一些實(shí)例向你展示這意味的是什么峻厚。
在 React 中,所有的組件的渲染功能都依靠 JSX谆焊。JSX 是使用 XML 語法編寫 Javascript 的一種語法糖惠桃。這有一個(gè)通過React社區(qū)審核過的例子:
render () {
let{ items } =this.props
letchildren
if( items.length >0) {
children = (
{items.map( item =>
{item.name}
)}
)
}else{
children =
No items found.
}
return(
{children}
)
}
JSX 的渲染功能有下面這些優(yōu)勢(shì):
你可以使用完整的編程語言 JavaScript 功能來構(gòu)建你的視圖頁面。
工具對(duì) JSX 的支持相比于現(xiàn)有可用的其他 Vue 模板還是比較先進(jìn)的(比如辖试,linting辜王、類型檢查、編輯器的自動(dòng)完成)罐孝。
在 Vue 中呐馆,由于有時(shí)需要用這些功能,我們也提供了渲染功能并且支持了 JSX莲兢。然而汹来,對(duì)于大多數(shù)組件來說,渲染功能是不推薦使用了改艇。
在這方面收班,我們提供的是更簡單的模板:
{{ item.name }}
No items found.
優(yōu)點(diǎn)如下:
在寫模板的過程中,樣式風(fēng)格已定并涉及更少的功能實(shí)現(xiàn)谒兄。
模板總是會(huì)被聲明的闺阱。
模板中任何 HTML 語法都是有效的。
閱讀起來更貼合英語(比如舵变,for each item in items)。
不需要高級(jí)版本的 JavaScript 語法瘦穆,來增加可讀性纪隙。
這樣,不僅開發(fā)人員更容易編寫代碼扛或,設(shè)計(jì)人員和開發(fā)人員也可以更容易的分析代碼和貢獻(xiàn)代碼绵咱。
這還沒有結(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.
除非你把組件分布在多個(gè)文件上(例如CSS Modules)麸锉,要不在 React 中作用域內(nèi)的 CSS 就會(huì)產(chǎn)生警告。非常簡單的 CSS 還可以工作舆声,但是稍微復(fù)雜點(diǎn)的花沉,比如懸停狀態(tài)柳爽、媒體查詢、偽類選擇符等要么通過沉重的依賴來重做要么就直接不能用碱屁。
而 Vue 可以讓你在每個(gè)單文件組件中完全訪問 CSS磷脯。
@media(min-width:250px) {
.list-container:hover{
background: orange;
}
}
這個(gè)可選scoped屬性會(huì)自動(dòng)添加一個(gè)唯一的屬性(比如data-v-21e5b78)為組件內(nèi) CSS 指定作用域,編譯的時(shí)候.list-container:hover會(huì)被編譯成類似.list-container[data-v-21e5b78]:hover娩脾。
最后赵誓,就像 HTML 一樣,你可以選擇自己偏愛的 CSS 預(yù)處理器編寫 CSS柿赊。這可以讓你圍繞設(shè)計(jì)為中心展開工作俩功,而不是引入專門的庫來增加你應(yīng)用的體積和復(fù)雜度。
Vue 和 React 都提供了強(qiáng)大的路由來應(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 相信能為你帶來更好的開發(fā)體驗(yàn)洽腺。
兩者另一個(gè)重要差異是脚粟,Vue 的路由庫和狀態(tài)管理庫都是由官方維護(hù)支持且與核心庫同步更新的。React 則是選擇把這些問題交給社區(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īng)用的單一模板,而 Vue 提供了各種用途的模板喜爷。
它不能用用戶自建的模板構(gòu)建項(xiàng)目冗疮,而自建模板對(duì)企業(yè)環(huán)境下預(yù)先建立協(xié)議是特別有用的。
而要注意的是這些限制是故意設(shè)計(jì)的檩帐,這有它的優(yōu)勢(shì)术幔。例如,如果你的項(xiàng)目需求非常簡單湃密,你就不需要自定義生成過程特愿。你能把它作為一個(gè)依賴來更新仲墨。如果閱讀更多關(guān)于不同的設(shè)計(jì)理念。
React 學(xué)習(xí)曲線陡峭揍障,在你開始學(xué) React 前目养,你需要知道 JSX 和 ES2015,因?yàn)樵S多示例用的是這些語法毒嫡。你需要學(xué)習(xí)構(gòu)建系統(tǒng)癌蚁,雖然你在技術(shù)上可以用 Babel 來實(shí)時(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ā)者只需不到一天的時(shí)間閱讀指南就可以建立簡單的應(yīng)用程序逸邦。
ReactNative 能使你用相同的組件模型編寫有本地渲染能力的 APP(IOS 和 Android)。能同時(shí)跨多平臺(tái)開發(fā)在扰,對(duì)開發(fā)者是非常棒的缕减。相應(yīng)地,Vue 和Weex會(huì)進(jìn)行官方合作芒珠,Weex 是阿里的跨平臺(tái)用戶界面開發(fā)框架桥狡,Weex 的 JavaScript 框架運(yùn)行時(shí)用的就是 Vue。這意味著在 Weex 的幫助下皱卓,你使用 Vue 語法開發(fā)的組件不僅僅可以運(yùn)行在瀏覽器端裹芝,還能被用于開發(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ì)積極合作確保為開發(fā)者帶來良好的開發(fā)體驗(yàn)蜈漓。
Mobx 在 React 社區(qū)很流行穆桂,實(shí)際上在 Vue 也采用了幾乎相同的反應(yīng)系統(tǒng)。在有限程度上融虽,React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue享完,所以如果你習(xí)慣組合使用它們,那么選擇 Vue 會(huì)更合理有额。
Vue 的一些語法和 Angular 的很相似(例如v-ifvsng-if)般又。因?yàn)?Angular 是 Vue 早期開發(fā)的靈感來源彼绷。然而,Augular 中存在的許多問題茴迁,在 Vue 中已經(jīng)得到解決寄悯。
在 API 與設(shè)計(jì)兩方面上 Vue.js 都比 Angular 1 簡單得多,因此你可以快速地掌握它的全部特性并投入開發(fā)堕义。
Vue.js 是一個(gè)更加靈活開放的解決方案猜旬。它允許你以希望的方式組織應(yīng)用程序,而不是在任何時(shí)候都必須遵循 Angular 1 制定的規(guī)則倦卖,這讓 Vue 能適用于各種項(xiàng)目洒擦。我們知道把決定權(quán)交給你是非常必要的。
這也就是為什么我們提供Webpack template怕膛,讓你可以用幾分鐘熟嫩,去選擇是否啟用高級(jí)特性,比如熱模塊加載褐捻、linting掸茅、CSS 提取等等。
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 越來越多時(shí)會(huì)變得越來越慢,因?yàn)樽饔糜騼?nèi)的每一次變化阱表,所有 watcher 都要重新計(jì)算殿如。并且,如果一些 watcher 觸發(fā)另一個(gè)更新最爬,臟檢查循環(huán)(digest cycle)可能要運(yùn)行多次涉馁。Angular 用戶常常要使用深?yuàn)W的技術(shù),以解決臟檢查循環(huán)的問題爱致。有時(shí)沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域烤送。
Vue 則根本沒有這個(gè)問題,因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步隊(duì)列更新糠悯,所有的數(shù)據(jù)變化都是獨(dú)立觸發(fā)帮坚,除非它們之間有明確的依賴關(guān)系妻往。
有意思的是,Angular 2 和 Vue 用相似的設(shè)計(jì)解決了一些 Angular 1 中存在的問題试和。
我們單獨(dú)將 Augluar 2 作分類讯泣,因?yàn)樗耆且粋€(gè)全新的框架。例如:它具有優(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)常會(huì)被引用肴茄,它對(duì)那些喜歡用 Java 或者 C# 等類型安全的語言的人是非常有用的晌畅。
Vue 也十分適合制作企業(yè)應(yīng)用,你也可以通過使用官方類型或用戶貢獻(xiàn)的裝飾器來支持 TypeScript寡痰,這完全是自由可選的抗楔。
在性能方面,這兩個(gè)框架都非常的快拦坠。但目前尚沒有足夠的數(shù)據(jù)用例來具體展示连躏。如果你一定要量化這些數(shù)據(jù),你可以查看第三方參照贞滨,它表明 Vue 2 相比 Angular2 是更快的入热。
在大小方面,雖然 Angular 2 使用 tree-shaking 和離線編譯技術(shù)使代碼體積減小了許多晓铆。但包含編譯器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 還是要小的多勺良。但是要注意,用 Angular 2 的 App 的體積縮減是使用了 tree-shaking 移除了那些框架中沒有用到的功能骄噪,但隨著功能引入的不斷增多尚困,尺寸會(huì)變得越來越大。
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個(gè) NPM 依賴包耕渴,4 個(gè)文件和超過 3 千多字的介紹,這一切都是為了完成個(gè) Hello World齿兔。而Vue’s Hello World就非常簡單橱脸。甚至我們并不用花費(fèi)一整個(gè)頁面去介紹它。
Ember 是一個(gè)全能框架分苇。它提供了大量的約定添诉,一旦你熟悉了它們,開發(fā)會(huì)變得很高效医寿。不過栏赴,這也意味著學(xué)習(xí)曲線較高,而且并不靈活靖秩。這意味著在框架和庫(加上一系列松散耦合的工具)之間做權(quán)衡選擇须眷。后者會(huì)更自由,但是也要求你做更多架構(gòu)上的決定沟突。
也就是說花颗,我們最好比較的是 Vue 內(nèi)核和 Ember 的模板與數(shù)據(jù)模型層:
Vue 在普通 JavaScript 對(duì)象上建立響應(yīng),提供自動(dòng)化的計(jì)算屬性惠拭。在 Ember 中需要將所有東西放在 Ember 對(duì)象內(nèi)扩劝,并且手工為計(jì)算屬性聲明依賴。
Vue 的模板語法可以用全功能的 JavaScript 表達(dá)式求橄,而 Handlebars 的語法和幫助函數(shù)相比來說非常受限今野。
在性能上,Vue 甩開 Ember 幾條街罐农,即使是 Ember 2.0 的最新 Glimmer 引擎条霜。Vue 能夠自動(dòng)批量更新,而 Ember 在關(guān)鍵性能場(chǎng)景時(shí)需要手動(dòng)管理涵亏。
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)在是非常常見的。以及相比于Vue調(diào)用子組件的接口它的方法顯得有點(diǎn)笨重融欧。
如果你有興趣研究敏弃,你還會(huì)發(fā)現(xiàn)二者在接口設(shè)計(jì)的理念上是不同的。這可以通過各自創(chuàng)建的simple Todo List體現(xiàn)出來噪馏÷蟮剑或許有點(diǎn)主觀,但是很多人認(rèn)為 Vue 的 API 接口更簡單結(jié)構(gòu)更優(yōu)雅欠肾。
Polymer 是另一個(gè)由谷歌贊助的項(xiàng)目瓶颠,事實(shí)上也是 Vue 的一個(gè)靈感來源。Vue 的組件可以粗略的類比于 Polymer 的自定義元素董济,并且兩者具有相似的開發(fā)風(fēng)格步清。最大的不同之處在于,Polymer 是基于最新版的 Web Components 標(biāo)準(zhǔn)之上虏肾,并且需要重量級(jí)的 polyfills 來幫助工作(性能下降)廓啊,瀏覽器本身并不支持這些功能。相比而言封豪,Vue 在支持到 IE9 的情況下并不需要依賴 polyfills 來工作谴轮,。
在 Polymer 1.0 版本中吹埠,為了彌補(bǔ)性能第步,團(tuán)隊(duì)非常有限的使用數(shù)據(jù)綁定系統(tǒng)。例如缘琅,在 Polymer 中唯一支持的表達(dá)式只有布爾值否定和單一的方法調(diào)用粘都,它的 computed 方法的實(shí)現(xiàn)也并不是很靈活。
Polymer 自定義的元素是用 HTML 文件來創(chuàng)建的刷袍,這會(huì)限制使用 JavaScript/CSS(和被現(xiàn)代瀏覽器普遍支持的語言特性)翩隧。相比之下,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 工具來打包 Polymer 元素蔗怠。而在這方面,Vue 可以結(jié)合異步組件的特性和 Webpack 的代碼分割特性來實(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)而再廣泛應(yīng)用于主流的瀏覽器中策治。
Riot 2.0 提供了一個(gè)類似于基于組件的開發(fā)模型(在 Riot 中稱之為 Tag),它提供了小巧精美的 API兰吟。Riot 和 Vue 在設(shè)計(jì)理念上可能有許多相似處通惫。盡管相比 Riot ,Vue 要顯得重一點(diǎn)混蔼,Vue 還是有很多顯著優(yōu)勢(shì)的:
根據(jù)真實(shí)條件來渲染,Riot 根據(jù)是否有分支簡單顯示或隱藏所有內(nèi)容。
功能更加強(qiáng)大的路由機(jī)制庐扫,Riot 的路由功能的 API 是極少的缺亮。
更多成熟工具的支持。Vue 提供官方支持Webpack晚吞、Browserify和SystemJS延旧,而 Riot 是依靠社區(qū)來建立集成系統(tǒng)。
過渡效果系統(tǒng)槽地。Riot 現(xiàn)在還沒有提供迁沫。
更好的性能。Riot盡管聲稱其使用了虛擬 DOM捌蚊,但實(shí)際上用的還是臟檢查機(jī)制集畅,因此和 Angular 1 患有相同的性能問題。