區別：1、angularjs是透過“髒值檢測”的方式比對資料是否有變更，實現雙向資料綁定；而vue是採用“資料劫持”結合“發布者-訂閱者模式”的方式實現雙向資料綁定。 2.vue指令使用「v-」操作符，angularjs的指令使用「ng-」。
本教學操作環境：windows7系統、vue2.9.6&&Angular9版，DELL G3電腦。
之前項目都是使用Angularjs，（註明此處主要講Angularjs 1）在初步使用Vue.js後做一個簡單的對比筆記。
先從理論上簡單說各自的特點，之後再用幾個小的例子加以說明。
其中雙向資料綁定的實作使用了$scope變數的髒值檢測，使用$scope.$watch（視圖到模型），$scope.$apply(模型到視圖)檢測，內部調用的都是digest，當然也可以直接呼叫$scope.$digest進行髒檢查。值得注意的是當資料變化十分頻繁時，髒檢測對瀏覽器效能的消耗將會很大，官方註明的最大偵測髒值為2000個資料。
vue.js官網：是一套建立使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。 Vue 的核心函式庫只專注於視圖層，而且非常容易學習，非常容易與其它函式庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單一檔案元件和 Vue 生態系統支援的函式庫開發的複雜單頁應用程式。
Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和組合的視圖元件。
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只有在指定的事件觸發時進入髒值偵測，大致如下：
vue ：資料劫持
vue.js 則是採用資料劫持結合發布者-訂閱者模式的方式，透過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時發布訊息給訂閱者，觸發對應的監聽回呼。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty
下面直接上程式碼
#首先當然是Hello World了
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<div ng-app="myApp" ng-controller="myCtrl">
{{message}}
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', 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: '#app',
data: {
message: 'Hello Vue.js!'
}
})#Angular的雙向資料綁定
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{message}}</p>
<input ng-model="message">
</div>
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 @click="fn"></a>
(2)属性
<a v-bind: href="url"></a>
简写方式：<a :href="url"></a>
<div id="app">
<ul>
<li v-for="name in names">
{{ name.first }}
</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
names: [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
}
})<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="name in names">{{name.first}}</li>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = [
{ first: 'summer', last: '7310' },
{ first: 'David', last:'666' },
{ first: 'Json', last:'888' }
]
});<ul>
<li v-for="item in list">
<a :href="item.url">{{item.title}}</a>
</li>
</ul><div class="item" ng-repeat="news in newsList">
<a ng-href="#/content/{{news.id}}">
<img ng-src="{{news.img}}" />
<div class="item-info">
<h3 class="item-title">{{news.title}}</h3>
<p class="item-time">{{news.createTime}}</p>
</div>
</a>
</div><div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ message }}</p>
<button ng-click="reverseMessage()">Reverse Message</button>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello world!";
$scope.reverseMessage = function() {
this.message = this.message.split('').reverse().join('')
}
});相关推荐：《vue.js教程》
以上是angularjs和vuejs的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
