What is the difference between angularjs and vuejs

Difference: 1. Angularjs uses "dirty value detection" to compare whether the data has changed and realizes two-way data binding; while vue uses "data hijacking" combined with "publisher-subscriber mode" way to achieve two-way data binding. 2. The vue instruction uses the "v-" operator, and the angularjs instruction uses "ng-".

The operating environment of this tutorial: windows7 system, vue2.9.6&&Angular9 version, DELL G3 computer.

Comparison between using Angularjs and Vue.js

The previous projects all used Angularjs, (please note that this article mainly talks about Angularjs 1) After the initial use of Vue.js A simple comparison note.
First of all, let’s briefly talk about their respective characteristics in theory, and then use a few small examples to illustrate them.

Angular

• 1, MVVM (Model) (View) (View-model)
• 2, Module control Controller (Contoller) dependency injection:
• 3, two-way data binding: interface operations can be reflected in the data in real time, and data changes can be displayed in the interface in real time.
• 4, command (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
• 5, service Service($compile $ filter $interval $timeout $http...)
• 6, routing (ng-Route native routing), ui-router (routing component)
• 7, Ajax encapsulation ($http)

The implementation of two-way data binding uses dirty value detection of $scope variables, using $scope.$watch (view to model), $scope.$apply (model to view) detection, internal All calls are digest. Of course, you can also call $scope.$digest directly for dirty checking. It is worth noting that when data changes very frequently, dirty detection will consume a lot of browser performance. The official maximum dirty detection value is 2000 pieces of data.

Vue

vue.js official website: It is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of driving complex single-page applications developed using single-file components and Vue ecosystem-supported libraries. The goal of Vue.js is to implement

responsive data binding

and composed view components through the simplest possible API.

(1) Modularization. Currently, the hottest way is to use ES6 modularization directly in the project and combine it with Webpack for project packaging.

• (2) Componentization to create a single Files with component suffix .vue, including template (html code), script (es6 code), style (css style)
• (3) Two-way data binding: The operation of the interface can be reflected in the data in real time. Changes can be displayed on the interface in real time.
• (4) Command (v-html v-bind v-model v-if/v-show...)
• (5) Routing (vue-router)
• (6) vuex data sharing
• (7) Ajax plug-in (vue-resource, axios)
• vue is very small, the min source code after compression is 72.9kb, after gzip compression It is only 25.11kb, which is 144kb compared to Angular. You can use it by yourself with the required library plug-ins, such as routing plug-ins (Vue-router), Ajax plug-ins (vue-resource, axios), etc.

Principle of two-way data binding between Vue and Angular

angular.js: Dirty value check

angular. js uses dirty value detection to compare whether the data has changed to decide whether to update the view. The simplest way is to regularly poll to detect data changes through setInterval(). Of course, Google will not be so slow. Angular can only detect data changes at specified events. Enter dirty value detection when triggered, roughly as follows:

DOM events, such as the user inputting text, clicking a button, etc. (ng-click)
• XHR response event ($http)
• Browser Location change event ($location)
• Timer event ($timeout, $interval)
• Execute $digest() or $apply()

vue: Data hijacking

vue.js is Using data hijacking combined with the publisher-subscriber model, Object.defineProperty() is used to hijack the setters and getters of each property, publish messages to subscribers when the data changes, and trigger the corresponding listening callbacks. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

The code is directly below

The first is of course Hello World

vue

<div id="app">
  {{ message }}
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

Angular

<div ng-app="myApp" ng-controller="myCtrl">
 {{message}}
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world";
});

In comparison, vue uses the json data format to write dom and data, and the writing style is more based on the js data encoding format. , easy to understand.

Vue’s two-way data binding

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})

Angular’s ​​two-way data binding

<div ng-app="myApp" ng-controller="myCtrl">
  <p>{{message}}</p>
  <input ng-model="message">
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.message = "Hello world!";
});

vue is a lightweight Level framework does provide a lot of APIs, including some convenient instructions and attribute operations. Generally, Vue instructions use the (v-) operator, compared to angularjs instructions that use (ng-). Among them, vue.js also supports the abbreviation of instructions:

• (1) event click

  <a v-on: click="fn"></a>

  简写方式：
  <a></a>

• (2)属性

  <a v-bind: href="url"></a>

  简写方式：
  <a :href="url"></a>

vue.渲染列表

<div id="app">
  <ul>
    <li v-for="name in names">
      {{ name.first }}
    </li>
  </ul>
</div>

new Vue({
  el: &#39;#app&#39;,
  data: {
    names: [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
  }
})

Angularjs渲染列表

<div ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="name in names">{{name.first}}</li>
</div>

var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.names = [
      { first: &#39;summer&#39;, last: &#39;7310&#39; },
      { first: &#39;David&#39;, last:&#39;666&#39; },
      { first: &#39;Json&#39;, last:&#39;888&#39; }
    ]
});

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  src="/static/imghwm/default1.png"  data-src="{{news.img}}"  class="lazy"  ng- / alt="What is the difference between angularjs and vuejs" >
        <div class="item-info">
            <h3 id="news-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </div>
    </a>
</div>

vue和Angular处理用户输入

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

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

<div ng-app="myApp" ng-controller="myCtrl">
 <p>{{ message }}</p>
 <button ng-click="reverseMessage()">Reverse Message</button>
</div>

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

相关推荐：《vue.js教程》

The above is the detailed content of What is the difference between angularjs and vuejs. For more information, please follow other related articles on the PHP Chinese website!