导航：首页 > 开发技术 >

vuejs和angularjs的区别是什么

发表于：2025-02-06 作者：千家信息网编辑

千家信息网最后更新 2025年02月06日，这篇文章主要介绍"vuejs和angularjs的区别是什么"，在日常操作中，相信很多人在vuejs和angularjs的区别是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对

千家信息网最后更新 2025年02月06日vuejs和angularjs的区别是什么

这篇文章主要介绍"vuejs和angularjs的区别是什么"，在日常操作中，相信很多人在vuejs和angularjs的区别是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vuejs和angularjs的区别是什么"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

区别：1、angularjs上手难，而vuejs简单易学；2、angular的指令是"ng-xxx"，而vue是"v-xxx"；3、angular的所有指令和方法都是绑定在$scope上的，而vue的所有方法和指令都绑定在vue实例上。

本教程操作环境：windows7系统、vue2.9.6版，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的双向数据绑定

  {{ 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虽然是一个轻量级的框架，提供的API确非常多，包括一些便捷的指令和属性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js还支持指令的简写方式：

(1)事件click
简写方式：
(2)属性
简写方式：

vue.渲染列表

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

Angularjs渲染列表

  {{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的循环

            {{item.title}}

angular和vue的渲染差不多

                                {{news.title}}
            {{news.createTime}}

vue和Angular处理用户输入

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

总结：angularjs和vuejs的区别

1、angularJS上手难，而vueJS简单易学；

2、angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；

3、angularJS的所有指令和方法都是绑定在$scope上的，而vueJS是new出来一个实例，所有的方法和指令都在这个实例上，一个页面上可以有多个vue实例，但是angularJS的对象只能有一个；

4、angularJS是由google开发和维护的，vueJS是由个人维护的；

5、vueJS一般用于移动端的开发，而angularJS一般应用于大型的项目。

到此，关于"vuejs和angularjs的区别是什么"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！

很赞哦！