Angularjs和Vue.js的对比

Posted 2021-05-01 指尖下的精灵

俗话说，没有对比就没有伤害。

之前的项目中使用过，Angularjs(本文主要是针对Angularjs1),并且在深入的使用过vue.js后做了一个简单的对比。

首先从理论上简单的理一下各自的特点。

Angular

• 1、MVVM(Model)(View)(view-model)

• 2、模块化(Module)、控制器(controller)依赖注入

• 3、双向数据绑定：界面的操作能实时的反映到数据，数据的反映能实时的展示到界面上面

• 4、指令(ng-click、ng-model、ng-href、ng-src、ng-if...)

• 5、服务Service($compile、$filter、$interval、$timeout、$http...)

  
  

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

Vue

vue.js官网：是一套构建用户界面的  渐进式框架 。与其他的重量级框架不同的是，vue采用自底向上增量开发的设计。vue的核心库只关注视图层，并且非常容易学习，非常容易与其他库或者已有项目整合。另一方面，vue完全又能力驱动采用单文件组件和vue生态系统支持的库开发的复杂单页应用。

vue.js的目标通过尽可能简单的API实现响应数据绑定和组合的视图组件。

• （1）模块化，目前最热的方式是在项目中直接使用ES6的模块化，结合webpack进行项目打包

• （2）组件化，创造单个compoent后缀为.vue的文件，包含template（html代码），script代码（ES6代码），style（css样式）

• （3）路由，

vue非常的小巧，压缩后min源码为72.9kb，gzip压缩后的只有25.11kb，相比Angular为144kb

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还支持指令的简写方式。