Angular和Vue.js 深度對比

Vue.js 是開源的 JavaScript 框架，可以幫助開發者構建出美觀的 Web 界面。當和其它網絡工具配合使用時，Vue.js 的優秀功能會獲得大大增強。現在，已有許多開發人員開始使用 Vue.js 來取代 Angular 和 React.js  。

那麼對於 Angular 和 React.js ，開發者該如何選擇呢？

下面咱們會對這兩種框架進行介紹和深度對比。

Vue.js 是前 Google 員工 Evan You 的開發的，並於2014年發佈，現已得到了超過57,000個 GitHub star。許多開發人員都大力推薦 Vue，由於它很容易學習。若是你有深厚的 HTML、CSS 和 JavaScript 基礎，那麼學習 Vue.js 只需幾個小時。

Vue 對開發人員最有吸引力的地方是：它的新穎、輕便，並且複雜性不多甚至沒有。Vue 不但很是靈活簡單，並且還很是強大，同時還提供雙向數據綁定功能，就像 Angular 和 React 的虛擬 DOM 功能同樣。

Vue 能夠幫助開發人員以任何想要的方式來構建應用程序，這是 Angular 作不到的。

Vue.js - 多樣化的 JavaScript 框架

做爲一個跨平臺的，高度進步的框架，Vue 成爲了許多須要建立單頁應用程序的開發人員的首選。在用於開發 Web 應用程序的典型 MVC 體系結構中，Vue 充當了 View，這意味着它可讓開發者看到數據的顯示部分。除了上面提到的基本功能以外，Vue 還有許多其它優秀功能。

咱們來看看這些：

1. 容易使用

若是你一直在使用其它框架，那麼你能夠輕鬆使用 Vue，由於 Vue 的核心庫專一於 View 層，你能夠輕鬆地將其與第三方庫進行整合並與現有項目一塊兒使用。

2. 輕便

因爲 Vue 主要關注於 ViewModel 或雙向數據綁定，所以 Vue 很輕便。Vue 也具備十分基礎的文檔。Vue 用作 View 層，意味着開發者能夠將它用做頁面中的亮點功能，比起全面的 SPA，Vue 提供了更好的選擇。

3. 學習曲線很低

熟悉 HTML 的開發人員會發現 Vue 的學習曲線很低，同時對於經驗較少的開發人員和初學者來講，也可以快速地學習和理解 Vue。

4. 雙向綁定

Vue 提供了 v-model 指令（用於更新用戶輸入事件的數據），使得在表單輸入和結構元素上實現雙向綁定變得很容易。它能夠選擇正確的方式來更新輸入類型相關的元素。

5. 虛擬 DOM

因爲 Vue 是基於 Snabbdom 的輕量級虛擬 DOM 實現，所以 Vue 的性能有些許的提高。這是虛擬 DOM 的主要新功能之一，開發者能夠直接進行更新。當你須要在實際的 DOM 中進行更改時，只需執行一次這樣的更新功能。

6. 基於 HTML 模板的語法  

Vue 容許開發者直接將渲染的 DOM 綁定到底層的Vue實例數據上。這是一個頗有用的功能，由於它可讓開發者擴展基本的 HTML 元素，來保存可複用的代碼。

Angular：動態框架

Angular 是一個功能齊全的框架，支持 Model-View-Controller 編程結構，很是適合構建動態的單頁網絡應用程序。

谷歌在2009年開發出了 Angular 並對其提供支持，Angular 包含一個基於標準 JavaScript 和 HTML 的 JS 代碼庫。Angular 設計的最初目的是做爲一個使設計者可以與後端和前端進行交互的工具。

 如下是 Angular 的部分最好的功能：

1. Model-View-ViewModel（MVVM）

爲了構建客戶端Web應用程序，Angular 將原始 MVC 軟件設計模式背後的基本原理結合在一塊兒。然而，Angular 沒有實現傳統意義上的 MVC，而是實現了  MVVM 即 Model-View-ViewModel 模式。

2. 依賴注入

Angular 帶有內置的依賴注入子系統功能，這使得應用程序易於開發和測試。依賴注入容許開發者經過請求來得到依賴關係，而不是搜索依賴關係。這對開發人員很是有幫助。

3. 測試

在 Angular 中，能夠單獨對控制器和指令進行單元測試。Angular 容許開發人員進行端到端和單元測試運行器設置，這意味着也能夠從用戶角度進行測試。

4. 跨瀏覽器兼容

Angular 的一個有趣功能是，框架中編寫的應用程序在多個瀏覽器都能運行良好。Angular 能夠自動處理每一個瀏覽器所需的代碼。

5. 指令

Angular 的指令（用於渲染指令的DOM模板）  可用於建立自定義的 HTML 標記。這些是 DOM 元素上的標記，由於開發者能夠擴展指令詞彙表並製做本身的指令，或將它們轉換爲可重用組件。

6. Deep Linking

因爲 Angular 主要用於製做單頁應用程序，所以必須利用 Deep Linking 功能才能在同一頁面上加載子模板。Deep Linking 的目的是爲了查看位置 URL 並安排它映射到頁面的當前狀態。

Deep Linking 功能經過查看頁面狀態並將用戶帶到特定內容，而不是從主頁中遍歷應用程序來設置 URL。Deep Linking 容許全部主要搜索引擎，能夠輕鬆的搜索網絡應用程序。  

Vue.js 與 Angular--哪個最好？

究竟哪一個框架是最好的 - Angular 仍是 Vue？下面咱們經過如下幾點來深刻研究：

學習曲線

在學習曲線方面，Vue.js 的學習和理解相對簡單，而 Angular 則須要時間去習慣。開發人員認爲這兩個框架對於項目來講都很棒，但開發者中的大多數人更喜歡使用 Vue，由於當將 Vuex 添加到項目中時，Vue 更加簡單而且能夠很好地擴展  。

儘管 Vue 和 Angular 的一些語法相似，好比 API 和設計（這是由於 Vue 其實是從 Angular 的早期開發階段中得到啓發的），但 Vue 一直致力於在一些對於 Angular 來講很困難的方面提高本身 。開發者能夠在幾個小時內用 Vue.js 構建一個特別的應用程序，可是這對 Angular 來講是不可能的。

靈活性

Angular 是獨立的，這意味着你的應用程序應該有必定的構造方式。Vue 則更加寬泛，Vue 爲建立應用程序提供了模塊化，靈活的解決方案。

不少時候，Vue 被認爲是一個庫而不是框架。默認狀況下，Vue 不包含路由器，HTTP 請求服務等。開發者必須安裝所需的「插件」。Vue 很是靈活而且能夠與大多數開發者想要使用的庫兼容。

不過，也有開發人員更喜歡 Angular，由於 Angular 爲其應用程序的總體結構提供了支持。這有助於節省編碼時間。

文檔對象模型（DOM）

Vue 經過最少許的組件從新渲染，能夠將模板預編譯爲純 JavaScript。這個虛擬 DOM 容許進行大量的優化，這是 Vue 和 Angular 之間的主要區別。Vue 容許使用更簡單的編程模型，而 Angular 則以跨瀏覽器兼容的方式操做 DOM。

速度/性能

雖然 Angular 和 Vue 都提供了很高的性能，但因爲 Vue 的虛擬 DOM 實現的重量較輕，因此能夠說 Vue 的速度/性能略微領先。

更簡單的編程模型使 Vue 可以提供更好的性能。Vue 能夠在沒有構建系統的狀況下使用，由於開發者能夠將其包含在 HTML 文件中。這使得 Vue 易於使用，從而提升了性能。

Angular 可能會很慢的緣由是它使用髒數據檢查，這意味着 Angularmonitors 會持續查看變量是否有變化。

雙向數據綁定

這兩個框架均支持雙向數據綁定，但與 Vue.js 相比，Angular 的雙向綁定更加複雜。Vue 中的雙向數據綁定很是簡單，而在 Angular 中，數據綁定更加簡單。

什麼時候選擇 Vue.js？

若是你但願經過以最簡單的方式來製做 Web 應用程序，那麼你應該選擇 Vue。若是你的 Javascript 基礎不是太強大，或者有嚴格的開發截止日期，Vue 將是一個很好的選擇。

若是你的前端是 Laravel，那麼請選擇 Vue。Laravel 社區的開發者認爲 Vue 是他們最喜歡的框架。Vue 將總處理時間縮短了50％，並釋放了服務器上的空間。

若是是開發小規模應用或者開發時不喜歡受約束，請選擇Vue。

若是你很熟悉 ES5 Javascript 和 HTML，那麼請使用 Vue 完成你的項目。

若是你想要在瀏覽器中編譯模板而且使用其簡單性，使用獨立版本的Vue會很好。

若是你打算構建性能關鍵型SPA或須要功能範圍的 CSS，Vue 的單文件組件會很是完美。

什麼時候選擇 Angular？

若是你須要構建大型複雜的應用程序，那麼應該選擇 Angular，由於 Angular 爲客戶端應用程序開發提供了一個完整而全面的解決方案。

對於但願處理客戶端和服務器端模式的開發人員來講，Angular 是一個不錯的選擇。開發人員喜歡 Angular 的主要緣由是 Angular 可以使他們專一於任何類型的設計，不管是 jQuery 調用仍是 DOM 配置干擾。

對於開發人員建立具備多個組件和複雜需求的 Web 應用程序，Angular 也一樣適用。當你選擇Angular 時，本地開發人員會發現更容易理解應用程序功能和編碼結構。

若是你想在新項目中選擇現有組件，也能夠選擇 Angular，由於你只需複製和粘貼代碼便可。

Angular 可使用雙向數據綁定功能來管理 DOM 和模型之間的同步。這使 Angular 成爲了 Web 應用程序開發的強有力的工具。

但願製做更輕更快的Web應用程序的開發人員能夠利用 Angular 中的 MVC 結構和獨立的邏輯和數據組件，這有助於加速開發過程。

代碼比較

分析 Vue 和 Angular 的代碼頗有趣。包含標記，樣式和行爲的代碼能夠幫助開發者構建高效且可重用的接口。在 Angular 中，控制器和指令等實體包含在模塊中，而 Vue 的模塊中包含組件邏輯。

Vue 組件

  Vue.extend({ 
    data: function(){ return {...} }, 
    created: function() {...}, 
    ready: function() {...}, 
    components: {...}, 
    methods: {...}, 
    watch: {...} 
    //(other props excluded) 
});

Angular 模塊

angular.module(‘myModule’, […]);

Angular 中的 Directive 更增強大。

Vue 指令  

Vue.directive('my-directive', {
       bind: function () {...}, 
      update: function (newValue, oldValue) {...}, 
      unbind: function () {...}
  });

Angular 指令

myModule.directive('directiveName', function (injectables) { 
      return { 
            restrict: 'A', 
            template: '<div></div>', 
            controller: function() { ... },
             compile: function() {...},
             link: function() { ... } 
            //(other props excluded) };
            });

因爲 Vue.js 受 Angular 啓發，也借用了 Angular 的模板語法。所以循環，這兩個框架的插值和條件的語法都很是類似。

下面給出代碼片斷：

Vue 插值

{{myVariable}}

角插值

{{myVariable}}

Vue 循環

<li v-repeat="items" class="item-{{$index}}">
{{myProperty}}
</li>

Angular 循環

<li ng-repeat="item in items" class="item-{{$index}}"> 
{{item.myProperty}}
</li>

Vue 條件

<div v-if="myVar"></div> 
<div v-show="myVar"></div

角度條件

<div ng-if="myVar"></div>
<div ng-show="myVar"></div>

Vue.js 的編碼使得頁面渲染變得很是簡單。事實上，Vue.js 更像是一個庫而不是框架，由於它不提供 Angular 的全部功能。開發者將不得不依賴 Vue.js 的第三方代碼，而 Angular 提供了 HTTP 請求服務或路由器等功能。

Angular 和 Vue.js 的版本發佈

2017年6月8日發佈了 Vue.js v2.3.4的最新穩定版本 。在此版本以前，還有13個版本。

Angular 4  於2017年3月發佈。早期版本爲 Angular 1和2，沒有 Angular 3。Angular 的第5版於2017年11月發佈。第6版預計將於2018年3月發佈，第7版預計將於2018年9月/ 10月發佈。

Angular 開發工具介紹

專一企業應用開發的 Wijmo ，是用 TypeScript 編寫的新一代 JavaScript/HTML5 控件集。秉承觸控優先的設計理念，Wijmo 在全球率先支持 AngularJS，並×××能卓越、零依賴的 FlexGrid 和圖表等多個控件。Wijmo 靈活的 API 爲用戶提供易用、輕鬆的操做體驗，全面知足開發所需，是構建企業應用程序的全套控件集。

結論

Vue.js 是輕量級的開發框架，很適合開發小規模靈活的 Web 應用程序；而 Angular 儘管學習曲線較爲陡峭，但倒是構建完整複雜應用的好選擇。

原文連接：https://dzone.com/articles/comparing-progressive-javascript-frameworks-angula

轉載請註明出自：葡萄城控件

關於葡萄城

葡萄城公司成立於1980年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具於一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，併爲中國企業的信息化提供國際先進的開發工具、軟件和研發諮詢服務。