web前端进阶必备知识，阿里P6讲解：Vue.js VS Angular.js 初探

Vue

vue.js官网：是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

▲小编是一个有着5年工作经验的web前端架构师，关于web前端，自己有做材料的整合，一个完整学习web前端的路线，学习材料和工具。能够进我的群585928911收取，免费送给大家。希望你也能凭自己的努力，成为下一个优秀的程序员！

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)等

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.$a pply(模型到视图)检测，内部调用的都是digest，当然也可以直接调用$scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大，官方注明的最大检测脏值为2000个数据。

Vue与 Angular 双向数据绑定原理

Angular：脏值检查

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，在数据变动时发布消息给订阅者，触发相应的监听回调。

下面直接上代码

首先当然是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的双向数据绑定

<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还支持指令的缩写方式：

事件click
<a v-on: click="doSomething">...</a>
缩写方式：
<a @click="doSomething">...</a>
属性
<a v-bind: href="url">...</a>
缩写方式：
<a :href="url">...</a>