首頁 > 文章 > web前端 > angularjs和vuejs的差別是什麼

angularjs和vuejs的差別是什麼

青灯夜游原創: 2021-09-24 16:05:081226瀏覽

區別：1、angularjs是透過“髒值檢測”的方式比對資料是否有變更，實現雙向資料綁定；而vue是採用“資料劫持”結合“發布者-訂閱者模式”的方式實現雙向資料綁定。 2.vue指令使用「v-」操作符，angularjs的指令使用「ng-」。

本教學操作環境：windows7系統、vue2.9.6&&Angular9版，DELL G3電腦。

使用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個資料。

Vue

vue.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


  {{ message }}


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

Angular


 {{message}}


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

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

vue的雙向資料綁定


  {{ message }}
  


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

#Angular的雙向資料綁定


  {{message}}
  


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

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

(1)事件click
fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed
简写方式：
8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed
(2)属性
f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed
简写方式：
7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed

vue.渲染列表


  
    
      {{ name.first }}
    
  


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

Angularjs渲染列表


  {{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的渲染差不多


    
        
        
            {{news.title}}
            {{news.createTime}}

vue和Angular处理用户输入


  {{ message }}
  


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


 {{ message }}
 


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和vuejs的差別是什麼

使用Angularjs和Vue.js對比

Angular

Vue

vue

Angular

vue.渲染列表

Angularjs渲染列表

vue的循环

angular和vue的渲染差不多

{{news.title}}

vue和Angular处理用户输入

相關文章