angularjs和vuejs的区别是什么
本篇文章为大家展示了angularjs和vuejs的区别是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
公司主营业务:网站建设、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出沂南免费做网站回馈大家。
区别:1、angularjs是通过“脏值检测”的方式比对数据是否有变更,实现双向数据绑定;而vue是采用“数据劫持”结合“发布者-订阅者模式”的方式实现双向数据绑定。2、vue指令使用“v-”操作符,angularjs的指令使用“ng-”。
本教程操作环境:windows7系统、vue2.9.6&&Angular9版,DELL G3电脑。
使用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
{{ message }}new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } })
Angular
{{message}}var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world"; });
相比较来看,vue采用了json的数据格式进行dom和data的编写,编写风格更加靠进js的数据编码格式,通俗易懂。
vue的双向数据绑定
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }){{ message }}
Angular的双向数据绑定
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.message = "Hello world!"; });{{message}}
vue虽然是一个轻量级的框架,提供的API确非常多,包括一些便捷的指令和属性操作,一般vue是指令使用(v-)操作符,相比angularjs指令使用(ng-)。其中vue.js还支持指令的简写方式:
vue.渲染列表
new Vue({ el: '#app', data: { names: [ { first: 'summer', last: '7310' }, { first: 'David', last:'666' }, { first: 'Json', last:'888' } ] } })
- {{ name.first }}
Angularjs渲染列表
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = [ { first: 'summer', last: '7310' }, { first: 'David', last:'666' }, { first: 'Json', last:'888' } ] });{{name.first}}
vue的循环
angular和vue的渲染差不多
vue和Angular处理用户输入
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }){{ 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('') } });{{ message }}
上述内容就是angularjs和vuejs的区别是什么,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。
网页标题:angularjs和vuejs的区别是什么
当前路径:http://myzitong.com/article/ipeesh.html