Vue和angular的异同

最新推荐文章于 2023-05-12 23:30:59 发布

Johnsos

最新推荐文章于 2023-05-12 23:30:59 发布

阅读量611

点赞数

分类专栏： vue angular

本文链接：https://blog.csdn.net/Johnsos/article/details/84962222

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

angular

1 篇文章 0 订阅

订阅专栏

Vue和angular两者大同小异,但在一些方面又很大的区别,下面给大家分享一下两者之间的异同

Vue

在API 与设计两方面上 Vue.js 都比 Angular 简单得多,大部分初学者都是以Vue为重点
vue.js官网：是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。
Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在配合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。例如，Vue.js 核心默认不包含路由和 Ajax 功能，并且通常假定你在应用中使用了一个模块构建系统。这可能是最重要的区别。
vue非常小巧，压缩后min源码为72.9kb，gzip压缩后只有25.11kb，想比Angular为144kb，可以自驾搭配使用需要的库插件，类似路由插件(Vue-router)，Ajax插件(vue-resource)等

angular

1，MVVM（Model）(View)(View-model)
2，模块化（Module）控制器（Contoller）依赖注入：
3，双向数据绑定：界面的操作能实时反映到数据，数据的变更能实时展现到界面。
4，指令(ng-click ng-model ng-href ng-src ng-if...)
5，服务Service($compile $filter $interval $timeout $http...)

其中双向数据绑定的实现使用了 $s c o p e 变量的脏值检测，使用$ scope. $w a t c h （视图到模型），$ scope. $a p p l y (模型到视图) 检测，内部调用的都是 d i g e s t ，当然也可以直接调用$ scope.$digest进行脏检查。值得注意的是当数据变化十分频繁时，脏检测对浏览器性能的消耗将会很大，官方注明的最大检测脏值为2000个数据

代码不同
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!";
});

以上两个例子充分看出了angular和Vue的不同,有兴趣的同仁可以深入了解一下
总而言之,两者没有高与低,根据使用者的喜好和程度来确定是Vue还是angular
参考链接