angularjs和vuejs的區別

選擇 Vue 而不選擇 Angular，有下面幾個緣由，固然不是對每一個人都適合：
在 API 與設計兩方面上 Vue.js 都比 Angular 簡單得多，所以你能夠快速地掌握它的所有特性並投入開發。
Vue.js 是一個更加靈活開放的解決方案。它容許你以但願的方式組織應用程序，而不是任什麼時候候都必須遵循 Angular 制定的規則。它僅僅是一個視圖層，因此你能夠將它嵌入一個現有頁面而不必定要作成一個龐大的單頁應用。在配合其餘庫方面它給了你更大的的空間，但相應，你也須要作更多的架構決策。例如，Vue.js 核心默認不包含路由和 Ajax 功能，而且一般假定你在應用中使用了一個模塊構建系統。這多是最重要的區別。
Angular 使用雙向綁定，Vue 也支持雙向綁定，不過默認爲單向綁定，數據從父組件單向傳給子組件。在大型應用中使用單向綁定讓數據流易於理解。
在 Vue.js 中指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯。在 Angular 中二者有很多相混的地方。

Vue.js 有更好的性能，而且很是很是容易優化，由於它不使用髒檢查。Angular，當 watcher 愈來愈多時會變得愈來愈慢，由於做用域內的每一次變化，全部 watcher 都要從新計算。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環（digest cycle）可能要運行屢次。 Angular 用戶經常要使用深奧的技術，以解決髒檢查循環的問題。有時沒有簡單的辦法來優化有大量 watcher 的做用域。Vue.js 則根本沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步列隊更新，全部的數據變化都是獨立地觸發，除非它們之間有明確的依賴關係。惟一須要作的優化是在 v-for 上使用 track-by。

 

 

 

使用Angularjs和Vue.js對比

 

以前項目都是使用Angularjs，（註明此處主要講Angularjs 1）在初步使用Vue.js後作一個簡答的對比筆記。
首先從理論上簡單說一下各自的特色，以後再用幾個小的例子加以說明。

Angular

• 1，MVVM（Model）(View)(View-model)
• 2，模塊化（Module）控制器（Contoller）依賴注入：
• 3，雙向數據綁定：界面的操做能實時反映到數據，數據的變動能實時展示到界面。
• 4，指令(ng-click ng-model ng-href ng-src ng-if...)
• 5，服務Service($compile $filter $interval $timeout $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）路由，

vue很是小巧，壓縮後min源碼爲72.9kb，gzip壓縮後只有25.11kb，想比Angular爲144kb，能夠自駕搭配使用須要的庫插件，相似路由插件(Vue-router)，Ajax插件(vue-resource)等

下面直接上代碼

首先固然是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

  
  簡寫方式：

• (2)屬性

  
  簡寫方式：

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