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