使用Angularjs和Vue.js對比

本篇文章介紹的內容是關於使用Angularjs和Vue.js對比，現在分享給大家，有需要的朋友可以參考一下

##使用Angularjs和Vue.js對比

之前項目都是使用Angularjs，（註明此處主要講Angularjs 1）在初步使用Vue.js後做一個簡單的比較筆記。

先從理論上簡單說各自的特點，之後再用幾個小的例子加以說明。

Angular
1，MVVM（Model）(View)(View-model)
2，模組化（ Module）控制器（Contoller）依賴注入：
3，雙向資料綁定：介面的操作能即時反映到數據，資料的變更能即時展現到介面。
4，指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
#5，服務Service($compile $filter $interval $timeout $http...)
#6，路由(ng-Route原生路由),ui-router(路由元件)
7，Ajax封裝($http)

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

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

Vue 生態系統支援的函式庫

開發的複雜單頁應用程式。 Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和

組合的視圖元件

。
（1）模組化，目前最熱的方式是在專案中直接使用ES6的模組化，結合Webpack進行專案打包
（2）元件化，創造單一component後綴為.vue的文件，包含template(html程式碼)，script(es6程式碼),style(css樣式)
（3）雙向資料綁定：介面的操作能即時反映到數據，資料的變更能即時展現到介面。
（4）指令(v-html v-bind v-model v-if/v-show...)
（ 5）路由(vue-router)
（6）vuex 資料共享

• ###（7）Ajax外掛程式(vue-resource,axios) ###

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

Vue與Angular 雙向資料綁定原理

angular.js ：髒值檢查

angular.js 是透過髒值偵測的方式比對資料是否有變更，來決定是否更新視圖，最簡單的方式就是透過setInterval() 定時輪詢偵測資料變動，當然Google不會這麼low，angular只有在指定的事件觸發時進入髒值檢測，大致如下：

• #DOM事件，譬如用戶輸入文本，點擊按鈕等。 ( ng-click )

• XHR回應事件( $http )

• 瀏覽器Location變更事件( $location )

• #Timer事件( $timeout , $interval )

• #執行$digest() 或$apply()

vue ：資料劫持

vue.js 則是採用資料劫持結合發布者-訂閱者模式的方式，透過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時發布訊息給訂閱者，觸發對應的監聽回呼。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

下面直接上程式碼

#首先當然是Hello World了

vue

<p>
  {{ message }}
</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Angular

<p>
 {{message}}
</p>

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world";
});

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

vue的雙向資料綁定

<p>
  </p><p>{{ message }}</p>
  <input>


new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Angular的雙向資料綁定

<p>
  </p><p>{{message}}</p>
  <input>


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
});

vue雖然是一個輕量級的框架，提供的API確非常多，包括一些便捷的指令和屬性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js也支援指令的簡寫方式：

• (1)事件click

  <a v-on: click="fn"></a>

  簡寫方式：
  <a></a>

• #(2)屬性

  <a v-bind: href="url"></a>

  簡寫方式：
  <a :href="url"></a>

  #

vue.渲染列表

<p>
  </p>

    
•       {{ name.first }}     
  

new Vue({   el: '#app',   data: {     names: [       { first: 'summer', last: '7310' },       { first: 'David', last:'666' },       { first: 'Json', last:'888' }     ]   } })

Angularjs渲染列表

<p>
  </p>

{{name.first}}

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {     $scope.names = [       { first: 'summer', last: '7310' },       { first: 'David', last:'666' },       { first: 'Json', last:'888' }     ] });

vue的循环

    
•         {{item.title}}     

angular和vue的渲染差不多

<p>
    <a>
        <img  src="/static/imghwm/default1.png" data-src="{{news.img}}" class="lazy" alt="使用Angularjs和Vue.js對比" >
        <p>
            </p>
<h3 id="news-title">{{news.title}}</h3>
            <p>{{news.createTime}}</p>
        </a></p>
    

vue和Angular处理用户输入

<p>
  </p>
{{ message }}
  Reverse Message


new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

---

<p>
 </p><p>{{ message }}</p>
 <button>Reverse Message</button>


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "Hello world!";
    $scope.reverseMessage = function() {
        this.message = this.message.split('').reverse().join('')
    }
});

相关推荐：

AngularJS应用模块化的使用详解

Angular开发实践之服务端渲染_AngularJS

Vue.js的基础知识点总结

以上是使用Angularjs和Vue.js對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！