电竞比分网-中国电竞赛事及体育赛事平台

分享

Angular2 相比 Vue 有什么優(yōu)勢?

 quasiceo 2017-09-24


關(guān)注者
572
被瀏覽
81548

21 個(gè)回答

Angular2.1和Vue2.1都發(fā)布了,這個(gè)問題的答案可以更新一下了。

Angular2相對于Vue的優(yōu)勢在Vue2.0之后已經(jīng)削弱很多了。比如SSR(Vue2已經(jīng)原生支持)和全棧式框架(官方推薦Vuex+Vue-Router),native端也有阿里巴巴的weex。

但是Angular2在API設(shè)計(jì)的完整度和覆蓋度上還是Vue所不能及的,主要有這么幾點(diǎn)

1. Angular2原生Form支持:
Angular2原生的Form模塊功能相當(dāng)強(qiáng)大。除了雙向綁定之類的基本功能,還能通過programatic API 控制dom元素的表單行為。也有成型API提供自定義validator。這一點(diǎn)Vue只有v-model和第三方庫。對于后臺之類的重表單應(yīng)用,還是Ng2有優(yōu)勢。

2. 依賴注入
無論你喜不喜歡DI,這就是Angular2的強(qiáng)大功能之一。有DI可以在不改變代碼結(jié)構(gòu)的情況下完成功能替換。(如,在desktop和mobile有不同功能,可以通過注入不同service實(shí)現(xiàn),而共用相同的template和directive)。Vue則需要程序員自己規(guī)劃代碼組織,用來支持共享組件。DI也可以用于類似module local state的功能。比如,一個(gè)視頻播放控件有幾個(gè)子組件完成,子組件需要分享一個(gè)狀態(tài)。這一點(diǎn)Angular2有原生的service injection pattern。而Vue則沒有官方推薦。

3. 對標(biāo)準(zhǔn)向后兼容
Angular2在一些細(xì)節(jié)上對標(biāo)準(zhǔn)有更好的支持。比如 list differ 算法中 Angular2 可以支持實(shí)現(xiàn)了Symbol.iterator的對象,而Vue只能支持Array。對Observable和Promise,Angular2在應(yīng)用的各個(gè)地方,甚至模板級別都有支持(async pipe)。而Vue需要vue-rx等第三方庫支持。Angular2的組件有shadow dom的實(shí)現(xiàn)可以選擇,而Vue目前還沒有。

4. 測試
Angular2一開始就設(shè)計(jì)好了如何對組件進(jìn)行測試,而Vue組件雖然也很好寫測試,但是沒有官方推薦的唯一標(biāo)準(zhǔn)(當(dāng)然,對視圖是否需要測試還有待探討)。

除此以外,Angular2還有一些小功能比如檢驗(yàn)?zāi)0宓念愋桶踩矗0謇锬茉诰幾g器保證沒有引用model未定義的變量),不過AoT本身似乎還沒有穩(wěn)定,所以不能算優(yōu)勢。對TS的支持也是Angular好,當(dāng)然前提是你喜歡TS。

總體而言,就是Angular2里你能想到的都有了,你沒想到的它也有了??蚣艿娜嫘允请y以撼動的。(當(dāng)然,為此也付出了相當(dāng)?shù)拇鷥r(jià))。

=========== 分割線 ===============
以下是不靠譜的扯淡環(huán)節(jié)。主要還是說說其他優(yōu)勢不成立的原因。

Angular欽定的nativescript是一家保加利亞公司叫Telerik,保加利亞的程序員啊諸君識得幾個(gè)???Facebook比起telerik不知道高到哪里去了,react-native也就那樣,這么一家小公司么…當(dāng)然阿里的KPI項(xiàng)目也差不多,兩個(gè)都屬于半斤八兩。

說Ng2是企業(yè)維護(hù)項(xiàng)目比個(gè)人項(xiàng)目好,其實(shí)也不太靠譜。Ng2的最重要的compiler基本就是 tbosch (Tobias Bosch) 一個(gè)人寫的。主要還是Ng2太復(fù)雜,沒人能有大改動。

另外有人說Ng2一站式服務(wù)不需要配webpack,這基本就要廢掉很多其他好用的功能。對足夠復(fù)雜的應(yīng)用,基本webpack的功能如import style,style extract都是很好用的。連PatrickJS gdi2290 (PatrickJS) 自己都在用webpack。但是webpack要支持Angular2自己獨(dú)有的功能還是需要相當(dāng)庫作者努力和庫使用者配置的。而Vue的webpack支持是天生的。

Ng2大小就是個(gè)痛點(diǎn),45kb是經(jīng)過closure compiler之后的,這就意味著你必須保證代碼是嚴(yán)格遵從closure compiler的假設(shè)。這會使得引用第三方庫比較麻煩(調(diào)用方法和區(qū)分編譯目標(biāo)都要注意)。Vue的設(shè)計(jì)和實(shí)現(xiàn)就不會需要用到closure compiler這樣的東西。

其實(shí)Ng2的這些問題也正是它追求全面性導(dǎo)致的,為了全面就要更復(fù)雜的實(shí)現(xiàn),也就更容易出問題。

Angular2 相比 Vue 有什么優(yōu)勢? - 匿名用戶的回答 還是比較中肯的,但我也可以稍微分析一下:

1. 個(gè)人 vs. 大公司,這里直接復(fù)制黏貼我在另一個(gè)問題下的評論:

這是個(gè)常見的擔(dān)憂。我其實(shí)有時(shí)候覺得一個(gè)項(xiàng)目人多未必就好,你如果去 Vue/React/Angular/Ember 的 GitHub issues 轉(zhuǎn)轉(zhuǎn),你會發(fā)現(xiàn) Vue 的未關(guān)閉 issues/bugs 是最少的,而且開過 issue 的人都知道 Vue 的 bug 通常都會在一兩天之內(nèi)就 fix (對數(shù)據(jù)感興趣的可以看看 Issue Stats)。大團(tuán)隊(duì)的開發(fā)效率真的高嗎?看看 Angular 2 和 Aurelia 開發(fā)了這么久都遲遲處在 beta 狀態(tài),你真的對他們的開發(fā)效率有信心?我也參與 Meteor 的維護(hù),深知一個(gè)龐大的項(xiàng)目在多人參與之后反而對于 issue 的定位、分配、修正速度有多大的影響,正因?yàn)?Vue 是我一個(gè)人的項(xiàng)目,我對任意一段代碼都了如指掌,所以我修 bug 的效率是多人協(xié)作項(xiàng)目根本無法比較的。

另一方面,敢不敢依賴個(gè)人項(xiàng)目其實(shí)完全取決于團(tuán)隊(duì)對風(fēng)險(xiǎn)的容忍度,以及覺得項(xiàng)目的開發(fā)者靠不靠譜。你看 Laravel / Express / Backbone / Babel / CoffeeScript / Browserify / Webpack / Less / PostCSS / jspm 其實(shí)都是一人主導(dǎo)的項(xiàng)目,大家不照樣用得風(fēng)生水起?所以非要拿這個(gè)說事兒其實(shí)也不全面的。(update: 現(xiàn)已全職開發(fā) Vue)

2. 第二點(diǎn)沒錯。不過 ng2 + NativeScript 到底好不好用還是個(gè)未知數(shù),另一方面可以看看 Weex 到底怎么樣。(update: Weex 已支持用 Vue 2 作為 runtime,合作進(jìn)行中)

3. 所謂原生的服務(wù)端渲染,只要我寫一個(gè)不就行了嗎 -.- 雖然 Vue 的核心實(shí)現(xiàn)和 DOM 強(qiáng)耦合,但也不是沒有解決辦法。(update: Vue 2 已支持)

4. 不覺得多語言算是個(gè)優(yōu)勢,最多算是個(gè)特點(diǎn)吧。見仁見智了。其實(shí)用 TypeScript 寫 Vue 的人也不少(DefinitelyTyped 上有 Vue 和 vue-router 的 d.ts),Dart 么... 呵呵。另外 *.vue 文件支持用第三方預(yù)處理器寫模板和 CSS,ng2 就做不到,這一點(diǎn)我反倒覺得是 Vue 優(yōu)勢。(update: Vue 2 全家桶自帶官方 typings)

5. Vue 在最佳實(shí)踐下需要手動使用 setter 的場景其實(shí)非常少,這和對象復(fù)雜不復(fù)雜沒有關(guān)系,只和你有沒有正確地聲明初始數(shù)據(jù)有關(guān)系。ng2 雖然有 zone.js,但是對于不是從 ng2 所控制的范圍內(nèi)觸發(fā)的變動,ng2 依然不能檢測到。換句話說,數(shù)據(jù)操作必須是從 ng2 自身的方法或是事件偵聽函數(shù)中開始,才能享受 zone.js 的便利。相比之下在 Vue 中,響應(yīng)化以后的數(shù)據(jù)可以獨(dú)立于 vm 之外被單獨(dú)任意操作,這就使得和第三方數(shù)據(jù)源的整合可以和組件解耦。(update: ng2 Zone.js 是個(gè)坑 https://www.zhihu.com/question/53022579/answer/133298778?group_id=787208004360470528#comment-192481566)

6. 性能這一點(diǎn)直接下這樣的結(jié)論并不全面。不妨給幾個(gè)跑分鏈接看看?在我看到的跑分?jǐn)?shù)據(jù)里 ng2 除了超大量表單 (10k+ cells) 的首屏渲染有明顯優(yōu)勢外,其他情況下也就是比 Vue 快那么一丟丟而已。另外大部分跑分的場景都是不全面的,尤其是臟檢查的短板(大量 watcher + 小量數(shù)據(jù)熱更新)很少有在跑分里出現(xiàn),而這恰恰是 Vue 的長處。最后,別忘了 ng2 那 500kb minified 的大小。(update: 基于 krausest/js-framework-benchmark Vue 2 確實(shí)比 ng2 性能略優(yōu))

好像偏題了,如果說 ng2 真的對于 Vue 有什么優(yōu)勢的話,可能還是上面所提到的第二點(diǎn)吧。

最后,這種比較其實(shí)沒啥大意義,如果你對服務(wù)器渲染/原生移動有硬需求,那還不如上 React。拋開硬需求之外,那就是看哪個(gè)更符合你/你的團(tuán)隊(duì)的開發(fā)習(xí)慣,更能提升效率,這個(gè)你靠別人給你指點(diǎn)顯然沒用,自己試試就知道。
Vue是模塊化Web開發(fā)的輕量級方案。Angular2很可能是未來Web開發(fā)的標(biāo)準(zhǔn)方案,TypeScript,Web Component,Observable,DI。
客觀的說
  1. ng2的很大優(yōu)勢是ts而不是框架本身
  2. ng2因?yàn)間oogle的原因,社區(qū)肯定比vue強(qiáng)大,可用的各種組件肯定比vue要多,毫無爭議
  3. ng2和vue在解決ng1的問題的方向上幾乎是一致的
  4. 移動端,h5解決方案和web框架基本無關(guān),native bridge 的可行性絕對不應(yīng)該左右對web框架的評判,那個(gè)是錦上添花的東西。
  5. 在實(shí)際應(yīng)用上,能體現(xiàn)出兩者之間絕對差距的場景不超過10%,組件化的MVVM能解決的兩個(gè)框架都能解決,不能解決的依然不能解決(vuex可觀望)

angular的開發(fā)者能跟你們在知乎談笑風(fēng)生么?

剛剛結(jié)束了 NG-CONF 2016,Angular 2 發(fā)布了 rc 版本,所以來更新下這個(gè)答案。。

1. ng2 的大小問題已解決

最新版本的運(yùn)行時(shí)大小比較(min + gzip)
  • ng1: 55kb
  • ng2: 45kb
  • vue: 29kb

Angular 2 現(xiàn)在可以通過 Offline Compile 節(jié)約大量的運(yùn)行時(shí)大?。ㄍ瑫r(shí)還有首次渲染時(shí)間)。

雖然仍然稍微比 Vue 要大,但是最為一個(gè)大而全的一體化解決方案性價(jià)確實(shí)是很高了的。


2. ng2 有更加廣泛的多端支持

最新的官方支持實(shí)現(xiàn)有:

目前來說的話,對 Vue 而言,SSR 是沒有的(雖然 Vue 2 支持起來可能不難),React Native 是沒有的(雖然說有 Weex,但是對于國內(nèi)的 KPI 項(xiàng)目又出的這么慢可能要考慮下生態(tài)問題,而且 Vue 并沒有實(shí)現(xiàn)核心邏輯與渲染邏輯分離,Weex 到底是 Vue 的多端實(shí)現(xiàn)支持還是一個(gè)和 Vue 相似 API 的另一個(gè)框架都有存疑),移動端 Hybrid 也沒有 Ionic 這樣現(xiàn)有的簡單解決方案(當(dāng)然自己基于 Cordova 搭建也是可以的)。

3. Angular 2 也有了自己的 CLI 工具

這個(gè)只是剛剛扯平,Angular CLI,Vue 也有。


4. Angular 2 更加測試友好

Angular 2 提供了各種 Helper Function,在測試中可以更加簡潔高效,便于細(xì)粒度控制。


5. Angular 2 更加工具友好

Angular 2 的主體是的 JavaScript(TypeScript),而 Vue 的主體是 HTML(Vue),前者可以較為方便地使用現(xiàn)有工具完成代碼提示、代碼檢查等,而后者往往需要額外的編輯器或 IDE 插件支持。



PS:個(gè)人項(xiàng)目和大公司主導(dǎo)項(xiàng)目本身并沒有什么優(yōu)劣之分,尤老師說的個(gè)人項(xiàng)目的自由度更高當(dāng)然是對的,但是精力有限確實(shí)也是客觀的事實(shí),比如 Google 現(xiàn)在基本是要把 Angular 2 從 Framework 做成 Platform,從工作量級上這個(gè)程度個(gè)人確實(shí)是很難實(shí)現(xiàn)的。




--- 原回答---

截至回答時(shí)的問題為:
Angular2 相比 Vue 有什么優(yōu)勢?

所以問題要求就是只談優(yōu)勢,并不是客觀的對比。(只針對框架本身)

1. Angular2 由 Google 主導(dǎo),而 Vue 由個(gè)人主導(dǎo)。
并不是說能力方面,但考慮到個(gè)人的經(jīng)費(fèi)和精力等多方面原因,團(tuán)隊(duì)項(xiàng)目要比個(gè)人項(xiàng)目在多方面因素上更為靠譜。

2. Angular2 旨在提供通用的【前】端方案,而 Vue 僅專注于 Web。
作為框架而言 Angular2 在實(shí)現(xiàn)上具有更高的抽象層次,不僅可以開發(fā) Web 應(yīng)用(面向 DOM),還可以開發(fā)客戶端應(yīng)用(面向 Native UI),比如搭配 NativeScript。

3. Angular2 有原生的 Isomorphic 解決方案,而 Vue 只能靠第三方庫或服務(wù)。
服務(wù)器端渲染可以提供良好的 SEO 以及首頁加載的性能優(yōu)化,而 Angular2 有官方提供的服務(wù)器端渲染支持,可以解決 Vue 等純前端框架無法解決的痛點(diǎn)。

4. Angular2 具有更廣泛的開發(fā)語言支持,而 Vue 只有 JavaScript 支持。
Angular2 官方提供 TypeScript、JavaScript 以及 Dart 的開發(fā)支持(不同的分發(fā)版本,不同的文檔),并且能夠在行為和形式上基本保持一致性(幾乎相同的 API)。而 Vue 本身只有 JavaScript 支持,其他語言只能單純靠編譯到 JavaScript 實(shí)現(xiàn)。

5. Angular2 的數(shù)據(jù)綁定在使用上更為簡單。
Angular2 支持綁定到任何普通的 JavaScript 對象,并且不會對對象造成任何改變,通過 zone.js 實(shí)現(xiàn)任意位置的異步操作后的數(shù)據(jù)自動同步。而 Vue 對于一些復(fù)雜對象的復(fù)雜操作,需要手動調(diào)用 setter 來通知 Vue 進(jìn)行更新,操作上更為復(fù)雜。

6. Angular2 的綜合性能確實(shí)比 Vue 更好。
參見各種跑分。

7?. 使用 Angular 2 更有助于淘汰落后瀏覽器,促進(jìn)社會進(jìn)步。
RT。

8?. Angular2 的最新版本號約是 Vue 的兩倍,更具氣勢。
RT。

9?. Angular2 仍然在 Beta 階段,相對于 Vue 而言具有更多找 BUG 發(fā) PR 的機(jī)會。
RT。

    本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多