Heim > Artikel > Web-Frontend > Was ist der Unterschied zwischen AngularJS und VueJS?

Was ist der Unterschied zwischen AngularJS und VueJS?

青灯夜游Original: 2021-09-24 16:05:081376Durchsuche

Unterschied: 1. Angularjs verwendet „Dirty Value Detection“, um zu vergleichen, ob sich die Daten geändert haben, um eine bidirektionale Datenbindung zu erreichen, während Vue „Data Hijacking“ in Kombination mit dem „Publisher-Subscriber-Modell“ verwendet, um eine bidirektionale Datenbindung zu erreichen . 2. Die Vue-Anweisung verwendet den Operator „v-“ und die AngularJS-Anweisung verwendet „ng-“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.9.6 und Angular9-Version, DELL G3-Computer.

Vergleich zwischen der Verwendung von Angularjs und Vue.js

Frühere Projekte verwendeten alle Angularjs (bitte beachten Sie, dass sich dieser Artikel hauptsächlich auf Angularjs bezieht 1) Machen Sie nach der ersten Verwendung von Vue.js eine einfache Vergleichsnotiz.
Lassen Sie uns zunächst kurz theoretisch über ihre jeweiligen Eigenschaften sprechen und diese dann anhand einiger kleiner Beispiele veranschaulichen.

Angular

1, MVVM (Modell) (Ansicht) (Ansichtsmodell)
2, Modular (Modul) Controller (Controller) Abhängigkeitsinjektion:
3, Zwei-Wege-Datenbindung: Schnittstelle Operationen können sich in Echtzeit in den Daten widerspiegeln und Datenänderungen können in Echtzeit in der Schnittstelle angezeigt werden.
4, Befehl (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 natives Routing), UI-Router (Routing-Komponente)
7, Ajax-Kapselung ($http)

Die Implementierung der bidirektionalen Datenbindung verwendet die schmutzige $scope-Variable Verwenden Sie zur Werterkennung die Erkennung „$scope.$watch“ (Ansicht zu Modell) und „$scope.$apply“ (Modell zu Ansicht). Natürlich kann $scope.$digest auch direkt zur schmutzigen Überprüfung aufgerufen werden. Es ist zu beachten, dass die Dirty-Erkennung bei sehr häufigen Datenänderungen viel Browserleistung beansprucht. Der offizielle maximale Wert für die Dirty-Erkennung beträgt 2000 Daten.

Vue

vue.js offizielle Website: Es handelt sich um eine Reihe von progressiven Frameworks zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks verwendet Vue ein inkrementelles Bottom-up-Entwicklungsdesign. Die Kernbibliothek von Vue konzentriert sich nur auf Ansichtsebenen und ist sehr einfach zu erlernen und in andere Bibliotheken oder bestehende Projekte zu integrieren. Vue hingegen ist vollständig in der Lage, komplexe Single-Page-Anwendungen zu betreiben, die mit „Single File Components“ und „Vue Ecosystem Supported Libraries“ entwickelt wurden. Das Ziel von Vue.js besteht darin, responsive Datenbindung und komponierte Ansichtskomponenten über die einfachste mögliche API zu implementieren.

(1) Modularisierung ist derzeit die direkte Verwendung der ES6-Modularisierung im Projekt und die Kombination mit Webpack für die Projektverpackung. (2) Komponentisierung: Erstellen Sie eine einzelne Komponentendatei mit dem Suffix .vue Vorlage (HTML-Code), Skript (ES6-Code), Stil (CSS-Stil)

(3) Zwei-Wege-Datenbindung: Der Betrieb der Schnittstelle kann in Echtzeit in den Daten widergespiegelt werden, und die Änderungen in den Daten können in Echtzeit in der Benutzeroberfläche angezeigt werden.

(4) Befehl (v-html v-bind v-model v-if/v-show...)
(5) Routing (vue-router)
(6) vuex-Datenfreigabe
(7 ) Ajax-Plugin (vue-ressource, axios)
vue ist nach der Komprimierung sehr klein. Nach der GZIP-Komprimierung sind es nur 144 KB Verwenden Sie es selbst mit den erforderlichen Bibliotheks-Plug-Ins, ähnlich wie Routing-Plug-Ins (Vue-Router), Ajax-Plug-Ins (Vue-Ressource, Axios) usw.
Prinzip der bidirektionalen Datenbindung zwischen Vue und Angular Um Datenänderungen regelmäßig über setInterval() zu erkennen, kann Angular Datenänderungen nur bei bestimmten Ereignissen erkennen, etwa wie folgt:

DOM-Ereignisse B. wenn der Benutzer Text eingibt, auf eine Schaltfläche klickt usw. (ng-click)

vue: Datenhijacking

vue.js nutzt Datenhijacking in Kombination mit dem Publisher-Subscriber-Modell, um die Setter und Getter jeder Eigenschaft über Object.defineProperty() zu kapern und Nachrichten zu veröffentlichen, wenn sich die Daten ändern , lösen Sie den entsprechenden Abhörrückruf aus. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefinePropertyDer Code ist direkt unten

Der erste ist natürlich 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";
});

Im Vergleich dazu verwendet Vue das JSON-Datenformat zum Schreiben von Dom und Daten. Der Schreibstil basiert eher auf dem JS-Datenkodierungsformat, was leicht zu verstehen ist.
Vues bidirektionale Datenbindung

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

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

Angulars bidirektionale Datenbindung

<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 ist ein leichtes Framework, bietet jedoch viele APIs, einschließlich einiger praktischer Anweisungen und Attributoperationen im Allgemeinen Vue-Anweisungen verwenden den (v-)-Operator, im Vergleich zu AngularJS-Anweisungen, die (ng-) verwenden. Unter anderem unterstützt vue.js auch die Abkürzung von Anweisungen:

(1) Ereignisklick

fb18926a59749a682e51d2201c2ba6895db79b134e9f6b82c0b36e0489ee08ed

简写方式：
8159299ceddef3bf00d03ef9f56ad0db5db79b134e9f6b82c0b36e0489ee08ed

(2)属性

f1d426d3654278992adc280d87d5593a5db79b134e9f6b82c0b36e0489ee08ed

简写方式：
7e02c3b846c23f3f09a33678d01021f05db79b134e9f6b82c0b36e0489ee08ed

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 ng-src="{{news.img}}" />
        <div class="item-info">
            <h3 class="item-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;)
    }
});

In Verbindung stehende Artikel

Mehr sehen