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 一樣的性能問題。