標籤:

Angular2 相比 Vue 有什麼優勢?

同樣是組件化的,把 js 和 html 都寫在一個文件里,Angular 2 相比 Vue 有什麼優勢可言嗎?


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

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

但是Angular2在API設計的完整度和覆蓋度上還是Vue所不能及的,主要有這麼幾點

1. Angular2原生Form支持:

Angular2原生的Form模塊功能相當強大。除了雙向綁定之類的基本功能,還能通過programatic API 控制dom元素的表單行為。也有成型API提供自定義validator。這一點Vue只有v-model和第三方庫。對於後台之類的重表單應用,還是Ng2有優勢。

2. 依賴注入

無論你喜不喜歡DI,這就是Angular2的強大功能之一。有DI可以在不改變代碼結構的情況下完成功能替換。(如,在desktop和mobile有不同功能,可以通過注入不同service實現,而共用相同的template和directive)。Vue則需要程序員自己規劃代碼組織,用來支持共享組件。DI也可以用於類似module local state的功能。比如,一個視頻播放控制項有幾個子組件完成,子組件需要分享一個狀態。這一點Angular2有原生的service injection pattern。而Vue則沒有官方推薦。

3. 對標準向後兼容

Angular2在一些細節上對標準有更好的支持。比如 list differ 演算法中 Angular2 可以支持實現了Symbol.iterator的對象,而Vue只能支持Array。對Observable和Promise,Angular2在應用的各個地方,甚至模板級別都有支持(async pipe)。而Vue需要vue-rx等第三方庫支持。Angular2的組件有shadow dom的實現可以選擇,而Vue目前還沒有。

4. 測試

Angular2一開始就設計好了如何對組件進行測試,而Vue組件雖然也很好寫測試,但是沒有官方推薦的唯一標準(當然,對視圖是否需要測試還有待探討)。

除此以外,Angular2還有一些小功能比如檢驗模板的類型安全(即,模板里能在編譯器保證沒有引用model未定義的變數),不過AoT本身似乎還沒有穩定,所以不能算優勢。對TS的支持也是Angular好,當然前提是你喜歡TS。

總體而言,就是Angular2里你能想到的都有了,你沒想到的它也有了。框架的全面性是難以撼動的。(當然,為此也付出了相當的代價)。

=========== 分割線 ===============

以下是不靠譜的扯淡環節。主要還是說說其他優勢不成立的原因。

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

說Ng2是企業維護項目比個人項目好,其實也不太靠譜。Ng2的最重要的compiler基本就是 tbosch (Tobias Bosch) 一個人寫的。主要還是Ng2太複雜,沒人能有大改動。

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

Ng2大小就是個痛點,45kb是經過closure compiler之後的,這就意味著你必須保證代碼是嚴格遵從closure compiler的假設。這會使得引用第三方庫比較麻煩(調用方法和區分編譯目標都要注意)。Vue的設計和實現就不會需要用到closure compiler這樣的東西。

其實Ng2的這些問題也正是它追求全面性導致的,為了全面就要更複雜的實現,也就更容易出問題。


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

1. 個人 vs. 大公司,這裡直接複製黏貼我在另一個問題下的評論:

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

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

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

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

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

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

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

好像偏題了,如果說 ng2 真的對於 Vue 有什麼優勢的話,可能還是上面所提到的第二點吧。

最後,這種比較其實沒啥大意義,如果你對伺服器渲染/原生移動有硬需求,那還不如上 React。拋開硬需求之外,那就是看哪個更符合你/你的團隊的開發習慣,更能提升效率,這個你靠別人給你指點顯然沒用,自己試試就知道。


Vue是模塊化Web開發的輕量級方案。Angular2很可能是未來Web開發的標準方案,TypeScript,Web Component,Observable,DI。


剛剛結束了 NG-CONF 2016,Angular 2 發布了 rc 版本,所以來更新下這個答案。。

1. ng2 的大小問題已解決

最新版本的運行時大小比較(min + gzip)

  • ng1: 55kb
  • ng2: 45kb
  • vue: 29kb

Angular 2 現在可以通過 Offline Compile 節約大量的運行時大小(同時還有首次渲染時間)。

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

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

最新的官方支持實現有:

  • Web:One framework.,就是本身,沒什麼好說的。
  • SSR:Angular Universal,服務端渲染實現。
  • Mobile:Angular Mobile Toolkit,其實就是套殼,也沒什麼好說的。
  • NativeScript:Cross-Platform Native Development with Javascript,一個開源的跨平台的原生控制項實現。
  • React Native:react-native-renderer,FaceBook 推出的一個跨平台原生控制項實現。
  • Ionic2:http://ionic.io/2,一個跨平台的移動端 Hybrid 解決方案。
  • Electron:GitHub - angular/angular-electron: Angular2 + Electron,一個跨平台的桌面端 Hybrid 解決方案。

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

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

這個只是剛剛扯平,Angular CLI,Vue 也有。

4. Angular 2 更加測試友好

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

5. Angular 2 更加工具友好

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

PS:個人項目和大公司主導項目本身並沒有什麼優劣之分,尤老師說的個人項目的自由度更高當然是對的,但是精力有限確實也是客觀的事實,比如 Google 現在基本是要把 Angular 2 從 Framework 做成 Platform,從工作量級上這個程度個人確實是很難實現的。

--- 原回答---

截至回答時的問題為:

Angular2 相比 Vue 有什麼優勢?

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

1. Angular2 由 Google 主導,而 Vue 由個人主導。

並不是說能力方面,但考慮到個人的經費和精力等多方面原因,團隊項目要比個人項目在多方面因素上更為靠譜。

2. Angular2 旨在提供通用的【前】端方案,而 Vue 僅專註於 Web。

作為框架而言 Angular2 在實現上具有更高的抽象層次,不僅可以開發 Web 應用(面向 DOM),還可以開發客戶端應用(面向 Native UI),比如搭配 NativeScript。

3. Angular2 有原生的 Isomorphic 解決方案,而 Vue 只能靠第三方庫或服務。

伺服器端渲染可以提供良好的 SEO 以及首頁載入的性能優化,而 Angular2 有官方提供的伺服器端渲染支持,可以解決 Vue 等純前端框架無法解決的痛點。

4. Angular2 具有更廣泛的開發語言支持,而 Vue 只有 JavaScript 支持。

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

5. Angular2 的數據綁定在使用上更為簡單。

Angular2 支持綁定到任何普通的 JavaScript 對象,並且不會對對象造成任何改變,通過 zone.js 實現任意位置的非同步操作後的數據自動同步。而 Vue 對於一些複雜對象的複雜操作,需要手動調用 setter 來通知 Vue 進行更新,操作上更為複雜。

6. Angular2 的綜合性能確實比 Vue 更好。

參見各種跑分。

7?. 使用 Angular 2 更有助於淘汰落後瀏覽器,促進社會進步。

RT。

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

RT。

9?. Angular2 仍然在 Beta 階段,相對於 Vue 而言具有更多找 BUG 發 PR 的機會。

RT。

。。。


就是比較喜歡Vue的API,我們公司已經逐步開始使用了。


客觀的說

  1. ng2的很大優勢是ts而不是框架本身

  2. ng2因為google的原因,社區肯定比vue強大,可用的各種組件肯定比vue要多,毫無爭議
  3. ng2和vue在解決ng1的問題的方向上幾乎是一致的
  4. 移動端,h5解決方案和web框架基本無關,native bridge 的可行性絕對不應該左右對web框架的評判,那個是錦上添花的東西。
  5. 在實際應用上,能體現出兩者之間絕對差距的場景不超過10%,組件化的MVVM能解決的兩個框架都能解決,不能解決的依然不能解決(vuex可觀望)

angular的開發者能跟你們在知乎談笑風生么?


angular2是谷歌出品,絕對不用。

原因:老程序員都知道。


=========更新答案=======

如何工程化開發大型angular2項目(上篇)(分享自知乎網)http://zhuanlan.zhihu.com/p/23808621

=======================

淺談一下從3月份到現在用angular2的體驗。alpha版到rc.7,之間變動之大。router系統重構好幾版,component組件編寫語法也是變了好幾次。上頭追新,作死應用到生產環境,應用越做越大,打包出來JS都快2、3M。導致客戶普遍抱怨首屏載入慢。還好後來在Nginx伺服器上做了優化,還有angular提供了預編譯技術,先渲染HTML。速度提升60%。

這裡也不是抱怨angular小組技術變動大,畢竟還是研發階段。我想提一點是,追求新技術是值得鼓勵的,但是不要把還在研發的技術應用在主線產品中,而是用在一些內部系統中。不然真是血的教訓。

當然要說說,angular這次變革式創新出了2代。優勢有

1.學習成本降低,因為有中文版文檔www. angular.cn,在也不用聽新同學抱怨英文看不懂。基本看幾天就能上手。會angular2,看vue基本無壓力,反過來也行得通。

2.技術實現成本降低,用angular1實現組件共用,用2輕鬆實現。現在項目里已經有很多通用組件了。

3.react,vue的redux,angular2也有,ngrx技術。

4.對於選擇恐懼症的盆友,angular2真是一站式服務。

5.聽說react可以開發native app,不好意思angular2和nativescript也可以開發原生app。 忘了說一句,angular2還可以開發react native。(自行上GitHub搜索angular2 react native).

6.最六的是支持Rx.JS。

7.人生苦短,快用angular2吧。

PS:哪有蘿蔔坑,準備挪坑,私聊


A開頭,排名比較靠前


最大的優勢是vue作者會上知乎


Angular 的字比Vue的字多

一切脫離了團隊和業務場景的框架比較都是刷流氓


angular2 你不用去搞什麼webpack

不用手動組合一個框架

用es6 ts都可以寫


話說angular2有公司在用么


你們說的都好有道理,人生苦短,我準備試試vue~


4.0beta了,ng2國外完整框架stater一大籮筐,用起來很方便。


Vue已經上手,放不下啦。


@尤雨溪 感覺尤老師有大把的時間來與網友辯論,還不如想想怎麼把vue.js做得更好,畢竟它的發展比ng差太多

還在用ng1.5,可恥地匿了~


有過一年的angularjs和ionic開發經驗 最近去 看vue 2 好多東西秒懂, 看angular 2 只想爆粗 好多東西不懂 新知識是好的 能不能考慮下 前端新血液 呵呵


5月份已經要結束了,ng2還在beta...


在美帝 幾乎接到的每一個電話面試都會強調有Angular的工作經歷 尤其是Angular 2...

然而接到的100+電話面試(只要簡歷還在網上就會一直有recruiter來找你) 直到現在還沒有人提到過Vue的...??

Angular優勢的確很大很大 大家都說了很多

那麼我來說說缺陷吧……

比如Angular的開發者不會上知乎大戰不認可Angular的知友

或是和大家談笑風生


推薦閱讀:

angular+meteor 已經有團隊在做,Vue+meteor有類似的項目嗎?
vue中,組件怎麼做到按需載入呢?

TAG:Angular? | Vuejs |