Angular 有哪些地方比 Vue 更優秀？（Vue粉還有30秒到達戰場）

點擊上方「CSDN」，選擇「置頂公眾號」

技術資訊，第一時間送達！

大家都知道，Vue一直緊跟Angular（含AngularJS 1.x）的腳步，借鑒了大量的特性。但是，借鑒畢竟是借鑒，複製品不太可能比正品行貨做得更精緻。最近一個月仔細研究了Vue的所有文檔和常見的Demo項目，本文將會進行非常細緻全面的對比。

Round 1：打包工具

大家都知道，Angular有自己的打包工具@angular/cli，Vue也有自己的打包工具vue-cli。看起來挺像的，但是你仔細使用一下就會發現，這兩個東西完全就不是一個級別。為了給出一個直觀的對比，我們簡化一下，就看看這兩款工具分別實現了多少功能吧。

以下是vue-cli能支持的功能：

包括help在內，一共只有可憐巴巴的4個命令。

我們再來看@angular/cli能做什麼：

怎麼樣，有直觀感受了吧？簡而言之，如果說@angular/cli是一架坦克的話，vue-cli就是一架玩具坦克：

vue-cli要做到@angular/cli這麼完善基本上沒有可能，因為人力和資金都夠不上。也正是因為vue-cli是如此簡陋，導致很多日常開發必備的功能都需要開發者自己去下載配置第三方的Node模塊。

噢，這裡要特別提一下，@angular/cli的底層集成了webpack，Angular項目組在此基礎上做了自己的封裝，如果你有興趣去看@angular/cli的源代碼，應該已經發現了這一點。

Round 2：非同步載入模塊

在現在WEB開發中，前端的代碼量已經變得非常龐大，不可能再像以前那樣，把所有JS全部壓縮成一個文件，然後一次性全部載入。所以，無論你用什麼樣的前端框架，非同步載入模塊都是一個必備的功能。為了幫助初學者理解最基本的思路，畫圖示例如下：

以下是代碼塊和路由之間的對應關係（虛構的）：

• http://localhost:4200/home chunk-0.js(10k)

• http://localhost:4200/user chunk-1.js(10k)

• http://localhost:4200/role chunk-2.js(50k)

• http://localhost:4200/permission chunk-3.js(80k)

就算你不是前端開發者，你也能看出來，這樣好多了對不對？你不需要一上來就把所有js文件（一共150k）全部載入進來，只有當用戶開始使用某個菜單的時候，才去非同步載入。很明顯，這是一個必備的特性，我們來看在Vue和Angular裡面分別是怎麼實現非同步模塊的。

我們先來看Vue裡面繁瑣的做法：

根據以上文檔，你首先要寫一下你已經寫好的Vue組件，然後自己再去利用webpack的code splitting特性自己寫配置文件。很明顯，當你的項目規模已經做得很大的時候，比如你已經寫了500個Vue組件，這時候你想切一下非同步模塊，然後你就開始噁心了。首先你要把這500個組件都改一下，雖然每個組件改動的幅度不大，但是要改的數量還是挺多的！或者，當你發現某一些組件本來被打包在chunk-0.js裡面的，但是由於業務上的修改，你現在必須把它們移動到chunk-1.js裡面去，那對不起，請你自己到配置文件裡面去慢慢改吧！

然後當你點開以上文檔裡面的鏈接，你會看到以下翻譯了半拉子的中英混雜文檔：

這時候你會突然意識到，在Vue表面簡單優雅的文檔背後，隱藏著填不滿的天坑，用一幅你們都喜歡的圖來表達這種心情：

我們再來看Angular裡面是怎麼做非同步模塊載入的，非常簡單，你不需要修改任何組件，你也不需要自己去搭建webpack然後編寫繁瑣的配置文件，你只要在聲明路由的時候，用loadChildren配置項告訴Angular這是一個非同步模塊，done!

@angular/cli在編譯的時候會自動檢查所有路由配置，然後根據這些配置自動幫你切分成多個chunk。注意：所有這些動作都是自動完成的，不需要你再去單獨寫什麼配置項！很明顯，當項目規模變得很大的時候，Angular這種全自動實現的優勢就開始凸顯了。你到底是更相信人肉的做法？還是更相信機器的精確性？

Round 3：單元測試和集成測試

2009年，NodeJS的出現，標誌著前端開發進入了工業化時代。因為，在沒有NodeJS的那段黑暗歲月裡面，前端開發裡面有很多事情都是沒法做的，比如：JS代碼的合併和和壓縮、CSS的預處理、圖片路徑的自動處理、自動為每個資源塊生成Hash碼避免瀏覽器緩存，等等。

那時候，有一個巨大的痛點，基本上沒人能解決，那就是前端的自動化測試，包括單元測試和集成測試。大家都知道，前端代碼有一個很大的特點，它是依賴於瀏覽器環境的，所以在NodeJS出現之前，大部分企業都只能採用人肉測試的方式。當然，現在還有很多企業在人肉測試，這些企業要注意，你們距離現代前端開發有點遠了！

目前，市面上有很多Node模塊可以用來做單元測試，Karma+Jasmine的方案基本上是事實標準。

所以，Vue也是用的Karma+Jasmine的方案，以下是Vue官方文檔裡面的描述：

這裡面有兩點要注意：

• 第一點：Vue的單元測試需要你自己去安裝配置Karma+Jasmine，以上圖片紅框中的內容表明，Vue本身對單元測試的支持還在「計劃」中。

• 第二點：Vue的單元測試對你編寫的組件是有要求的，為了能編寫單元測試用例，你必須盡量用props屬性來表達組件的數據。

我們再來看Angular裡面是如何做單元測試的：

由於我們有強大的@angular/cli，它在生成每個組件的時候會自動生成對應的單元測試用例文件，同時，它還會把一些模板性質的代碼都自動生成好：

請注意：

• @angular/cli裡面內置了Karmar+Jasmine，所以你不需要自己去安裝配置，你也不需要為了版本問題焦頭爛額，你只要編寫測試用例就好了。

• 每個組件對應的測試用例模板都是自動生成的，你不需要手動去拷貝文件然後進行修改。

• 寫完測試用例之後，你只要運行ng test，@angular/cli會自動幫你去跑測試用例，你也沒有必要自己去寫啟動腳本了。

如果說Angular在單元測試方面的得分是80分，那麼Vue最多就20分，因為它把一堆麻煩事都丟給開發者，自己什麼也沒有做。而在集成測試方面，Vue就只能是0分了，因為壓根什麼都沒做。

單元測試只是驗證每一個組件自身是不是有問題，但是即使每一個組件本身都沒有問題，把這些組件都整合起來形成完成的系統之後還是會存在各種各樣的問題。所以，在整個系統都開發完成之後，我們還需要測試一下整體的功能有沒有問題，這叫「集成測試」、「場景測試」，或者叫「端到端測試」。

Angular團隊開發了一款集成測試工具，叫做Protractor（量角器）：

這是一款專門針對Angular的集成測試工具，它可以自動把你本地的瀏覽器啟動起來，模擬用戶輸入和滑鼠點擊等等功能，有了Protractor之後，你不再需要人肉去點頁面了！

請注意，以上動圖裡面的輸入和頁面滑動都是protractor自動完成的，當然，是根據你編寫的集成測試用例運行的。@angular/cli在生成新項目的時候，會自動生成一個e2e目錄，還有一些模板文件，你只要在裡面編寫用例就好了：

編寫集成測試用例的時候，同樣使用的Jasmine語法，你不需要學習任何新東西。

從對集成測試的支持大家應該可以看出來，在那些技術含量不太高的地方，Vue確實可以抄襲得有模有樣，但是一旦技術門檻提高，Vue就沒法抄了，或者說抄得沒那麼快了。

想要了解Protractor更多的細節，請訪問官方網站：Protractor（https://github.com/angular/protractor）

Round 4：TypeScript

TypeScript（簡稱TS）是微軟開發的一門腳本語言，它是JavaScript的超集。

TS的編譯過程如下：

Angular初學者有一個常見的問題，那就是在學習Angular之前是否要先學一學TypeScript。

我的看法是不需要！

因為TypeScript的語法和ES6的語法相似度非常高，如果你已經熟悉了ES6，可以直接上手寫TypeScript，一邊玩一邊學就好了。對於已經掌握了一門後端編程語言的開發者，例如Java和C#，那就更加沒有難度了，除了一些小小的語法習慣要適應一下之外，幾乎沒有任何難度。

關於TypeScript，比較有意思的一點是，這門語言本身也是一個開源項目，它在github上的鏈接：https://github.com/Microsoft/TypeScript 。有一件事特別值得一提，C#之父Anders Hejlsberg是TypeScript項目組的核心代碼提交者。

對於代碼規模很大的前端項目來說，有兩件事情非常重要：

• 如何合理地切分模塊，從而達到分而治之的目標。

• 如何管理或者說約束開發人員寫出健壯的代碼。

• 項目上線之後，如何保證可維護性。

TypeScript帶來的強類型約束剛好可以在這兩個方面帶來巨大的幫助，引用你們都喜歡的一張圖：

Round 5：AOT and TreeShaking

由於Angular應用是基於TypeScript編寫的，而TypeScript是強類型的，這就帶來了另一個好處：TS編譯器可以做大量的靜態檢查和編譯優化，比如AOT和Tree Shaking，把你用不到的那些模塊和代碼都自動消除掉，從而可以保證你的應用足夠小巧和高效。

隨著你的項目規模越來越大，你會越來越體會到有AOT是多麼的重要，而Vue在這一點上根本無能為力，開發者只能自求多福了。

我看到還有一些人在誤導開發者，說Angular體積大，這基本上就是閉著眼睛胡說了，看上圖。

Round 6：團隊

來看兩張圖，重新定義一下什麼叫「團隊」。

以下是angular項目組的提交記錄圖：

以下是vue的提交記錄圖，你會發現基本上都是一個人在提交，其大部分都是打醬油的：

如果你知道「獨行快、眾行遠」的話，應該知道我在說什麼。

還有很多非常細節的內容，我會繼續研究，然後詳細擴充進來，比如：

• 由於Vue沒有依賴注入機制，你無法mock後台服務，所以你沒法優雅地解決單元測試的mock問題。

• Vue沒有內置對Form表單校驗的支持，你必須自己去把第三方的表單校驗工具集成到項目裡面。

• Vue沒有對i18n做內置的支持，如果你的項目要做國際化，很抱歉，還是你自己去解決。

結語

Angular從入手到編碼、測試，全部一條龍服務，就像你們說的，它是一個「全家桶」式的設計，你只要安心編寫你的應用就好了。

而Vue貌似簡單文檔本後，隱藏這一個接一個的大坑，當你真正深入使用之後，你就會猛然發現其總體學習成本比Angular高出非常多！

Vue只是一個新手玩具，而Angular才是真正的戰鬥坦克。

所以，拜託不要再拿Vue來和Angular比了，完全就不是一個量級的東西好不好啊？

附：學習資源

想了解一下Angular？請參考官方網站Angular Docs。還有我自己寫的一個系列開源項目可以幫助你快速入手：NiceFish 。這個開源項目包含了典型的To C型布局的實例、To B型管理後台系統的示例、移動端Ionic實例、配合Electron打包成桌面端應用的實例。而且我給NiceFish這個項目錄製了完整的視頻教程，編寫了詳細的文檔。所以，你可以發現，它的star數量已經超過了1.7K，作為一個沒啥技術含量的教學項目，還是挺不錯的。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！