Angularjs和Vue.js有什麼差異？簡單對比

相關教學推薦：《angularjs教學》

#選擇Vue 而不選擇Angular，有以下幾個原因，當然不是對每個人都適合：  

在API 與設計兩方面上Vue.js 都比Angular 簡單得多，因此你可以快速地掌握它的全部特性並投入開發。  

Vue.js 是一個更靈活開放的解決方案。它允許你以希望的方式組織應用程序，而不是任何時候都必須遵循 Angular 制定的規則。它只是一個視圖層，所以你可以將它嵌入一個現有頁面而不一定要做成一個龐大的單頁應用程式。在配合其他函式庫方面它給了你更大的空間，但相應，你也需要做更多的架構決策。例如，Vue.js 核心預設不包含路由和 Ajax 功能，通常假定你在應用程式中使用了一個模組建置系統。這可能是最重要的區別。  

Angular 使用雙向綁定，Vue 也支援雙向綁定，不過預設為單向綁定，資料從父元件單向傳給子元件。在大型應用中使用單向綁定讓資料流易於理解。  

在 Vue.js 中指令和元件分得更清晰。指令只封裝 DOM 操作，而元件代表一個自給自足的獨立單元 —— 有自己的視圖和資料邏輯。在 Angular 中兩者有不少相混的地方。

Vue.js 有更好的效能，而且非常非常容易最佳化，因為它不會使用髒檢查。 Angular，當 watcher 越來越多時會變得越來越慢，因為作用域內的每一次變化，所有 watcher 都要重新計算。並且，如果一些 watcher 觸發另一個更新，髒檢查循環（digest cycle）可能要運行多次。 Angular 使用者常常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的作用域。

Vue.js 則根本沒有這個問題，因為它使用基於依賴追蹤的觀察系統並且非同步列隊更新，所有的資料變更都是獨立觸發，除非它們之間有明確的依賴關係。唯一需要做的優化是在 v-for 上使用 track-by。

使用Angularjs和Vue.js對比

之前專案都是使用Angularjs，（註明此處主要講Angularjs 1）在初步使用Vue.js後做一個簡答的對比筆記。 
先從理論上簡單說各自的特點，之後再用幾個小的例子加以說明。

Angular

• 1，MVVM（Model）(View)(View-model)
• 2，模組化（Module）控制器（Contoller）依賴注入：
• 3，雙向資料綁定：介面的操作能即時反映到數據，資料的變更能即時展現到介面。
• 4，指令(ng-click ng-model ng-href ng-src ng-if...)
• 5，服務Service($compile $filter $interval $timeout $http ...)

其中雙向資料綁定的實作使用了$scope變數的髒值檢測，使用$scope.$watch（視圖到模型），$scope.$apply(模型到視圖)檢測，內部呼叫的都是digest，當然也可以直接呼叫$scope.$digest進行髒檢查。值得注意的是當資料變化十分頻繁時，髒檢測對瀏覽器效能的消耗將會很大，官方註明的最大偵測髒值為2000個資料。

Vue

vue.js官網：是一套建構使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。 Vue 的核心庫只專注於視圖層，而且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單一文件元件和 Vue 生態系統支援的函式庫開發的複雜單頁應用。

Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和組合的視圖元件。

• （1）模組化，目前最熱的方式是在專案中直接使用ES6的模組化，結合Webpack進行專案打包
• （2）元件化，創造單個component後綴為.vue的文件，包含template(html程式碼)，script(es6程式碼),style(css樣式)
• （3）路由，

vue非常小巧，壓縮後min源碼為72.9kb，gzip壓縮後只有25.11kb，想比Angular為144kb，可以自駕搭配使用需要的庫插件，類似路由插件(Vue-router)，Ajax插件(vue-resource)等

下面直接上程式碼

首先當然是Hello World了

#vue

<div id="app">  {{ message }}</div> new Vue({  el: &#39;#app&#39;,  data: {    message: &#39;Hello Vue.js!&#39;  }})

Angular

<div ng-app="myApp" ng-controller="myCtrl"> {{message}}</div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.message = "Hello world";});

相比較來看，vue採用了json的資料格式進行dom和data的編寫，編寫風格更加靠進js的資料編碼格式，通俗易懂。

vue的雙向資料綁定

<div id="app">  <p>{{ message }}</p>  <input v-model="message"></div> new Vue({  el: &#39;#app&#39;,  data: {    message: &#39;Hello Vue.js!&#39;  }})

Angular的双向数据绑定

<div ng-app="myApp" ng-controller="myCtrl">  <p>{{message}}</p>  <input ng-model="message"></div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.message = "Hello world!";});

vue虽然是一个轻量级的框架，提供的API确非常多，包括一些便捷的指令和属性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js还支持指令的简写方式：

• (1)事件click

  简写方式：

• (2)属性

  []（http://www.cnblogs.com/summer7310/p/url)）
  简写方式：

vue.渲染列表

<div id="app">  <ul>    <li v-for="name in names">      {{ name.first }}    </li>  </ul></div> new Vue({  el: &#39;#app&#39;,  data: {    names: [      { first: &#39;summer&#39;, last: &#39;7310&#39; },      { first: &#39;David&#39;, last:&#39;666&#39; },      { first: &#39;Json&#39;, last:&#39;888&#39; }    ]  }})

Angularjs渲染列表

<div ng-app="myApp" ng-controller="myCtrl">  <li ng-repeat="name in names">{{name.first}}</li></div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.names = [      { first: &#39;summer&#39;, last: &#39;7310&#39; },      { first: &#39;David&#39;, last:&#39;666&#39; },      { first: &#39;Json&#39;, last:&#39;888&#39; }    ]});

vue的循环

<ul>    <li v-for="item in list">        <a :href="item.url">{{item.title}}</a>    </li></ul>

angular和vue的渲染差不多

<div class="item" ng-repeat="news in  newsList">    <a ng-href="#/content/{{news.id}}">        <img  src="/static/imghwm/default1.png"  data-src="{{news.img}}"  class="lazy"  ng- / alt="Angularjs和Vue.js有什麼差異？簡單對比" >        <div class="item-info">            <h3 id="news-title">{{news.title}}</h3>            <p class="item-time">{{news.createTime}}</p>        </div>    </a></div>

vue和Angular处理用户输入

<div id="app">  <p>{{ message }}</p>  <button v-on:click="reverseMessage">Reverse Message</button></div> new Vue({  el: &#39;#app&#39;,  data: {    message: &#39;Hello Vue.js!&#39;  },  methods: {    reverseMessage: function () {      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)    }  }})

<div ng-app="myApp" ng-controller="myCtrl"> <p>{{ message }}</p> <button ng-click="reverseMessage()">Reverse Message</button></div> var app = angular.module(&#39;myApp&#39;, []);app.controller(&#39;myCtrl&#39;, function($scope) {    $scope.message = "Hello world!";    $scope.reverseMessage = function() {        this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)    }});

相关教程推荐：《angular教程》、《vue教程》

以上是Angularjs和Vue.js有什麼差異？簡單對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！