使用Angularjs和Vue.js对比

柔情只为你懂 2022-05-27 02:40 137阅读 0赞

## 使用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/defineProperty][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_defineProperty]defineProperty

下面直接上代码

首先当然是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('')
        }
    });

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Object_defineProperty]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty