使用Angularjs和Vue.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

"app"> {{ message }}
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })

Angular

"myApp" ng-controller="myCtrl"> {{message}}
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的双向数据绑定

"myApp" ng-controller="myCtrl">

{{message}}

"message">
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 @click="fn">a>`
  • (2)属性

    简写方式:

vue.渲染列表

"app">
  • for="name in names"> {{ name.first }}
new Vue({ el: '#app', data: { names: [ { first: 'summer', last: '7310' }, { first: 'David', last:'666' }, { first: 'Json', last:'888' } ] } })

Angularjs渲染列表

"myApp" ng-controller="myCtrl">
  • "name in names">{{name.first}}
  • 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处理用户输入

    "app">

    {{ message }}

    new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

    "myApp" ng-controller="myCtrl">

    {{ message }}

    var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world!"; $scope.reverseMessage = function() { this.message = this.message.split('').reverse().join('') } });

    你可能感兴趣的:(使用Angularjs和Vue.js对比)