站長資訊網
區別：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
<div id="app"> {{ message }} </div> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
Angular
<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>
vue.渲染列表
<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' } ] } })
Angularjs渲染列表
<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' } ] });
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 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>
vue和Angular處理用戶輸入
<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('') } });
