鍍金池/ 教程/ HTML/ 對比其它框架
自定義過濾器
自定義指令
概述
安裝
起步
深入響應(yīng)式原理
Class 與 Style 綁定
混合
列表渲染
方法與事件處理器
表單控件綁定
對比其它框架
組件
計算屬性
插件
數(shù)據(jù)綁定語法
構(gòu)建大型應(yīng)用
條件渲染
Vue 實例
過渡

對比其它框架

Angular

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

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

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

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

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

  • Vue.js 有更好的性能,并且非常非常容易優(yōu)化,因為它不使用臟檢查。Angular,當(dāng) watcher 越來越多時會變得越來越慢,因為作用域內(nèi)的每一次變化,所有 watcher 都要重新計算。并且,如果一些 watcher 觸發(fā)另一個更新,臟檢查循環(huán)(digest cycle)可能要運(yùn)行多次。 Angular 用戶常常要使用深奧的技術(shù),以解決臟檢查循環(huán)的問題。有時沒有簡單的辦法來優(yōu)化有大量 watcher 的作用域。Vue.js 則根本沒有這個問題,因為它使用基于依賴追蹤的觀察系統(tǒng)并且異步列隊更新,所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā),除非它們之間有明確的依賴關(guān)系。唯一需要做的優(yōu)化是在 v-for 上使用 track-by。

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

React

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

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

Virtual DOM 提供了一個函數(shù)式的方法描述視圖,這真的很棒。因為它不使用數(shù)據(jù)觀察機(jī)制,每次更新都會重新渲染整個應(yīng)用,因此從定義上保證了視圖與數(shù)據(jù)的同步。它也開辟了 JavaScript 同構(gòu)應(yīng)用的可能性。

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

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

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

再多說幾句:

  • React 團(tuán)隊雄心勃勃,計劃讓 React 成為通用平臺的 UI 開發(fā)工具,而 Vue 專注于為 Web 提供實用的解決方案。

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

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

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

Ember

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

也就是說,最好比較 Vue.js 內(nèi)核和 Ember 的模板與數(shù)據(jù)模型層:

  • Vue 在普通 JavaScript 對象上建立響應(yīng),提供自動化的計算屬性。在 Ember 中需要將所有東西放在 Ember 對象內(nèi),并且手工為計算屬性聲明依賴。

  • Vue 的模板語法可以用全功能的 JavaScript 表達(dá)式,而 Handlebars 的語法和幫助函數(shù)語法相比之下非常受限。

  • 在性能上,Vue 甩開 Ember 幾條街,即使是 Ember 2.0 最新的 Glimmer 引擎。Vue 自動批量更新,在性能比較關(guān)鍵時 Ember 要手工管理循環(huán)。

Polymer

Polymer 是另一個由 Google 支持的項目,實際上也是 Vue.js 的靈感來源之一。Vue.js 的組件可以類比為 Polymer 中的自定義元素,它們提供類似的開發(fā)體驗。最大的不同在于,Polymer 依賴最新的 Web 組件特性,在不支持的瀏覽器中,需要加載笨重的 polyfill,性能也會受到影響。相對的,Vue.js 無需任何依賴,最低兼容到IE9。

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

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

Riot

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

  • 真實的條件渲染,Riot 渲染所有的分支,然后簡單地顯示/隱藏它們。
  • 一個強(qiáng)大得多的路由器,Riot 的路由 API 過于簡陋。
  • 更成熟的工具鏈支持,見 Webpack + vue-loader。
  • 過渡效果系統(tǒng),Riot 沒有。
  • 更佳的性能。Riot 實際上使用臟檢查而不是 Virtual DOM,因而遭受跟 Angular 一樣的性能問題。
上一篇:自定義過濾器下一篇:組件