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

Angular

選擇 Vue 而不選擇 Angular挚躯,有下面幾個(gè)原因,當(dāng)然不是對(duì)每個(gè)人都適合:

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

Vue.js 是一個(gè)更加靈活開放的解決方案。它允許你以希望的方式組織應(yīng)用程序纤控,而不是任何時(shí)候都必須遵循 Angular 制定的規(guī)則挂捻。它僅僅是一個(gè)視圖層,所以你可以將它嵌入一個(gè)現(xiàn)有頁(yè)面而不一定要做成一個(gè)龐大的單頁(yè)應(yīng)用船万。在配合其他庫(kù)方面它給了你更大的的空間刻撒,但相應(yīng),你也需要做更多的架構(gòu)決策唬涧。例如疫赎,Vue.js 核心默認(rèn)不包含路由和 Ajax 功能,并且通常假定你在應(yīng)用中使用了一個(gè)模塊構(gòu)建系統(tǒng)碎节。這可能是最重要的區(qū)別捧搞。

Angular 使用雙向綁定Vue 也支持雙向綁定狮荔,不過默認(rèn)為單向綁定胎撇,數(shù)據(jù)從父組件單向傳給子組件。在大型應(yīng)用中使用單向綁定讓數(shù)據(jù)流易于理解殖氏。

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

Vue.js 有更好的性能,并且非常非常容易優(yōu)化婚瓜,因?yàn)樗皇褂门K檢查宝鼓。Angular,當(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í)沒有簡(jiǎn)單的辦法來優(yōu)化有大量 watcher 的作用域片橡。Vue.js 則根本沒有這個(gè)問題,因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步列隊(duì)更新淮野,所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā)锻全,除非它們之間有明確的依賴關(guān)系。唯一需要做的優(yōu)化是在v-for上使用track-by录煤。

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

React

React.js 和 Vue.js 確實(shí)有一些相似 —— 它們都提供數(shù)據(jù)驅(qū)動(dòng)妈踊、可組合搭建的視圖組件了嚎。當(dāng)然它們也有許多不同。

首先廊营,內(nèi)部實(shí)現(xiàn)本質(zhì)上不同歪泳。React 的渲染建立在 Virtual DOM 上——一種在內(nèi)存中描述 DOM 樹狀態(tài)的數(shù)據(jù)結(jié)構(gòu)。當(dāng)狀態(tài)發(fā)生變化時(shí)露筒,React 重新渲染 Virtual DOM呐伞,比較計(jì)算之后給真實(shí) DOM 打補(bǔ)丁。

Virtual DOM 提供了一個(gè)函數(shù)式的方法描述視圖慎式,這真的很棒伶氢。因?yàn)樗皇褂脭?shù)據(jù)觀察機(jī)制,每次更新都會(huì)重新渲染整個(gè)應(yīng)用瘪吏,因此從定義上保證了視圖與數(shù)據(jù)的同步癣防。它也開辟了 JavaScript 同構(gòu)應(yīng)用的可能性。

Vue.js 不使用 Virtual DOM 而是使用真實(shí) DOM 作為模板掌眠,數(shù)據(jù)綁定到真實(shí)節(jié)點(diǎn)蕾盯。Vue.js 的應(yīng)用環(huán)境必須提供 DOM。但是蓝丙,相對(duì)于常見的誤解——Virtual DOM 讓 React 比其它的都快级遭, Vue.js 實(shí)際上性能比 React 好,而且?guī)缀醪挥檬止?yōu)化渺尘。而 React挫鸽,為了最優(yōu)化的渲染需要處處實(shí)現(xiàn)shouldComponentUpdate和使用不可變數(shù)據(jù)結(jié)構(gòu)。

在 API 方面沧烈,React(或 JSX)的一個(gè)問題是掠兄,渲染函數(shù)常常包含大量的邏輯像云,最終看著更像是程序片斷(實(shí)際上就是)而不是界面的視覺呈現(xiàn)锌雀。對(duì)于部分開發(fā)者來說蚂夕,他們可能覺得這是個(gè)優(yōu)點(diǎn),但對(duì)那些像我一樣兼顧設(shè)計(jì)和開發(fā)的人來說腋逆,模板能讓我們更好地在視覺上思考設(shè)計(jì)和 CSS婿牍。JSX 和 JavaScript 邏輯的混合干擾了我將代碼映射到設(shè)計(jì)的思維過程。相反惩歉,Vue.js 通過在模板中加入一個(gè)輕量級(jí)的 DSL (指令系統(tǒng))等脂,換來一個(gè)依舊直觀的模板,且能將邏輯封裝進(jìn)指令和過濾器中撑蚌。

React 的另一個(gè)問題是:由于 DOM 更新完全交給 Virtual DOM 管理上遥,當(dāng)想要自己控制 DOM 時(shí)就有點(diǎn)棘手了(雖然理論上可以做到,但是這樣做就本質(zhì)上違背了 React 的設(shè)計(jì)思想)争涌。如果應(yīng)用需要特別的自定義 DOM 操作粉楚,特別是復(fù)雜時(shí)間控制的動(dòng)畫,這個(gè)限制就很討厭亮垫。在這方面模软,Vue.js 更靈活,有許多用 Vue.js 制作的FWA/Awwwards 獲獎(jiǎng)?wù)军c(diǎn)饮潦。

再多說幾句:

React 團(tuán)隊(duì)雄心勃勃燃异,計(jì)劃讓 React 成為通用平臺(tái)的 UI 開發(fā)工具,而 Vue 專注于為 Web 提供實(shí)用的解決方案继蜡。

React回俐,由于它的函數(shù)式特質(zhì),可以很好地使用函數(shù)式編程模式稀并。但是對(duì)于初級(jí)開發(fā)者和初學(xué)者這也導(dǎo)致較大的學(xué)習(xí)難度鲫剿。Vue 更易學(xué)習(xí)并能快速投入開發(fā)。

對(duì)于大型應(yīng)用稻轨,React 社區(qū)已經(jīng)創(chuàng)造了大量的狀態(tài)管理方案灵莲,例如 Flux/Redux。Vue 本身不解決這個(gè)問題(React 內(nèi)核也是)殴俱,但是可以輕松地修改狀態(tài)管理模式政冻,實(shí)現(xiàn)一個(gè)類似的架構(gòu)。Vue 有自己的狀態(tài)管理方案Vuex线欲,而且 Vue 也可以與Redux一起用明场。

React 的開發(fā)趨勢(shì)是將所有東西都放在 JavaScript 中,包括 CSS李丰。已經(jīng)有許多 CSS-in-JS 方案苦锨,但是所有的方案多多少少都有它的問題。而且更重要的是,這么做脫離了標(biāo)準(zhǔn)的 CSS 開發(fā)經(jīng)驗(yàn)舟舒,并且很難和 CSS 社區(qū)的已有工作配合拉庶。Vue 的單文件組件在把 CSS 封裝到組件模塊的同時(shí)仍然允許你使用你喜歡的預(yù)處理器。

Ember

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

也就是說砌们,最好比較 Vue.js 內(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ù)語(yǔ)法相比之下非常受限影兽。

在性能上,Vue 甩開 Ember 幾條街莱革,即使是 Ember 2.0 最新的 Glimmer 引擎峻堰。Vue 自動(dòng)批量更新,在性能比較關(guān)鍵時(shí) Ember 要手工管理循環(huán)盅视。

Polymer

Polymer 是另一個(gè)由 Google 支持的項(xiàng)目捐名,實(shí)際上也是 Vue.js 的靈感來源之一。Vue.js 的組件可以類比為 Polymer 中的自定義元素闹击,它們提供類似的開發(fā)體驗(yàn)镶蹋。最大的不同在于,Polymer 依賴最新的 Web 組件特性赏半,在不支持的瀏覽器中贺归,需要加載笨重的 polyfill,性能也會(huì)受到影響断箫。相對(duì)的拂酣,Vue.js 無需任何依賴,最低兼容到IE9仲义。

另外婶熬,在 Polymer 1.0 中剑勾,為了性能開發(fā)團(tuán)隊(duì)嚴(yán)格限制了它的數(shù)據(jù)綁定系統(tǒng)。例如赵颅,Polymer 模板支持的表達(dá)式僅有邏輯逆運(yùn)算和簡(jiǎn)單的方法調(diào)用虽另。它的計(jì)算屬性實(shí)現(xiàn)得也不是很靈活。

最后性含,當(dāng)發(fā)布到生產(chǎn)環(huán)境時(shí),Polymer 元素需要用專用工具 vulcanizer 打包鸳惯。相比之下商蕴,單文件 Vue 組件能與 Webpack 無縫整合,因而你可以輕松在組件中使用 ES6 及任意 CSS 預(yù)處理器芝发。

Riot

Riot 2.0 提供類似的基于組件的開發(fā)模式(Riot 稱之為“標(biāo)簽”)绪商,API 小而美。我認(rèn)為 Riot 與 Vue 在設(shè)計(jì)思路上有許多相同點(diǎn)辅鲸。不過格郁,盡管比 Riot 重一點(diǎn),Vue 提供了一些顯著優(yōu)處:

?真實(shí)的條件渲染独悴,Riot 渲染所有的分支例书,然后簡(jiǎn)單地顯示/隱藏它們。

一個(gè)強(qiáng)大得多的路由器刻炒,Riot 的路由 API 過于簡(jiǎn)陋决采。

更成熟的工具鏈支持,見 Webpack + vue-loader坟奥。

過渡效果系統(tǒng)树瞭,Riot 沒有。

更佳的性能爱谁。Riot 實(shí)際上使用臟檢查而不是 Virtual DOM晒喷,因而遭受跟 Angular 一樣的性能問題。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末访敌,一起剝皮案震驚了整個(gè)濱河市凉敲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌寺旺,老刑警劉巖荡陷,帶你破解...
    沈念sama閱讀 221,198評(píng)論 6 514
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異迅涮,居然都是意外死亡废赞,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,334評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門叮姑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唉地,“玉大人据悔,你說我怎么就攤上這事≡耪樱” “怎么了极颓?”我有些...
    開封第一講書人閱讀 167,643評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)群嗤。 經(jīng)常有香客問我菠隆,道長(zhǎng),這世上最難降的妖魔是什么狂秘? 我笑而不...
    開封第一講書人閱讀 59,495評(píng)論 1 296
  • 正文 為了忘掉前任骇径,我火速辦了婚禮,結(jié)果婚禮上者春,老公的妹妹穿的比我還像新娘破衔。我一直安慰自己,他們只是感情好钱烟,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,502評(píng)論 6 397
  • 文/花漫 我一把揭開白布晰筛。 她就那樣靜靜地躺著,像睡著了一般拴袭。 火紅的嫁衣襯著肌膚如雪读第。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,156評(píng)論 1 308
  • 那天拥刻,我揣著相機(jī)與錄音卦方,去河邊找鬼。 笑死泰佳,一個(gè)胖子當(dāng)著我的面吹牛盼砍,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播逝她,決...
    沈念sama閱讀 40,743評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼浇坐,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了黔宛?” 一聲冷哼從身側(cè)響起近刘,我...
    開封第一講書人閱讀 39,659評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎臀晃,沒想到半個(gè)月后觉渴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,200評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡徽惋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,282評(píng)論 3 340
  • 正文 我和宋清朗相戀三年案淋,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片险绘。...
    茶點(diǎn)故事閱讀 40,424評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡踢京,死狀恐怖誉碴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瓣距,我是刑警寧澤黔帕,帶...
    沈念sama閱讀 36,107評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站蹈丸,受9級(jí)特大地震影響成黄,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜逻杖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,789評(píng)論 3 333
  • 文/蒙蒙 一奋岁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧弧腥,春花似錦厦取、人聲如沸潮太。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,264評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)铡买。三九已至更鲁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奇钞,已是汗流浹背澡为。 一陣腳步聲響...
    開封第一講書人閱讀 33,390評(píng)論 1 271
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留景埃,地道東北人媒至。 一個(gè)月前我還...
    沈念sama閱讀 48,798評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像谷徙,于是被迫代替她去往敵國(guó)和親拒啰。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,435評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • Vue對(duì)比其他框架 這個(gè)頁(yè)面無疑是最難編寫的完慧,但我們認(rèn)為它也是非常重要的谋旦。或許你曾遇到了一些問題并且已經(jīng)用其他的框...
    伊滴墨閱讀 1,811評(píng)論 0 15
  • 一屈尼,vue是什么册着? Vue.js(讀音 /vju?/, 類似于view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重...
    不成才的IT狗閱讀 3,148評(píng)論 0 31
  • 一脾歧,vue是什么甲捏? Vue.js(讀音 /vju?/, 類似于view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重...
    米塔塔閱讀 826評(píng)論 2 15
  • 不知道多久沒有那種帶著滿身的力量鞭执,每天都是雞血滿滿的為著目標(biāo)奮斗摊鸡,等到晚上倒在床上的時(shí)候回顧這一天绽媒,為夢(mèng)又近一步而...
    VOATJ閱讀 193評(píng)論 0 0
  • 起初在看到青音姐的這本《愿有勇氣去熱愛》時(shí)是辕,心里第一感覺是認(rèn)為它不過是一本套路化的情感雞湯罷了,但當(dāng)我看完猎提,不禁改...
    博集天卷閱讀 1,365評(píng)論 1 1