使用Angularjs和Vue.js對比

sumer7310發表於2017-02-13
AngularVue.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個資料。

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('')
    }
});

相關文章