Vergleich mit Angularjs und Vue.js-js-Tutorial-php.cn

Der Inhalt dieses Artikels handelt vom Vergleich zwischen Angularjs und Vue.js. Jetzt können Freunde in Not darauf verweisen.

Vergleich zwischen der Verwendung von Angularjs und Vue.js

Die vorherigen Projekte verwendeten alle Angularjs (bitte beachten Sie, dass sich dieser Artikel hauptsächlich auf Folgendes bezieht). Angularjs 1) Machen Sie im Vorfeld nach der Verwendung von Vue.js eine einfache Vergleichsnotiz.
Lassen Sie uns zunächst kurz auf die jeweiligen Eigenschaften in der Theorie eingehen und diese dann anhand einiger kleiner Beispiele veranschaulichen.

Angular

1, MVVM (Modell) (Ansicht) (Ansichtsmodell)
2, Modular ( Modul ) Controller (Contoller) Dependency Injection:
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 (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
5, 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 den schmutzigen Wert des $scope Verwenden Sie zur Erkennung $scope.$watch (Ansicht zum Modell) und $scope.$apply (Modell zur Ansicht) zur Erkennung. Natürlich kann $scope.$digest auch direkt zur Dirty-Prü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

offizielle Website von vue.js: Es handelt sich um ein progressives Framework 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 die Ansichtsebene 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 steuern, die mit Single File Components und vom Vue-Ökosystem unterstützten Bibliotheken entwickelt wurden.

Das Ziel von Vue.js besteht darin, responsive Datenbindung und komponierte Ansichtskomponenten über die einfachste mögliche API zu implementieren.

(1) Modularisierung Der derzeit heißeste Weg besteht darin, die ES6-Modularität direkt im Projekt zu verwenden und sie mit Webpack für die Projektverpackung zu kombinieren
(2) Komponentisierung, erstellen Sie eine einzelne Komponentendatei mit dem Suffix .vue, einschließlich Vorlage (HTML-Code), Skript (ES6-Code), Stil (CSS-Stil)
(3) Bidirektionale Datenbindung: Schnittstellenoperationen können in Echtzeit in den Daten widergespiegelt werden, und Datenänderungen können in Echtzeit in der Schnittstelle angezeigt werden.
(4) Befehl (v-html v-bind v-model v-if/v-show...)
( 5) Routing (vue-router)
(6) Vuex-Datenfreigabe
(7) Ajax-Plug-in (vue-resource, Axios)

Vue ist nach der Komprimierung sehr klein. Nach der GZIP-Komprimierung sind es nur 144 KB. Sie können es selbst verwenden Erforderliche Bibliotheks-Plug-Ins, ähnlich dem Routing-Plug-In (Vue-Router), Ajax-Plug-Ins (Vue-Ressource, Axios) usw.

Zwei-Wege-Datenbindungsprinzip von Vue und Angular

angular.js: Dirty-Value-Prüfung

angular.js verwendet die Dirty-Value-Erkennung, um zu vergleichen, ob sich die Daten geändert haben, um zu entscheiden, ob die Ansicht aktualisiert werden soll Der einfachste Weg besteht darin, Datenänderungen regelmäßig über setInterval() zu ermitteln. So niedrig ist Angular nur, wenn ein bestimmtes Ereignis ausgelöst wird, etwa wie folgt:

DOM-Ereignisse, z. B. das Eingeben von Text durch Benutzer, das Klicken auf Schaltflächen usw. (ng-click)
XHR-Antwortereignis ($http)
Browser-Standortänderungsereignis ($location)
Timer-Ereignis ($timeout, $interval)
$digest() oder $apply() ausführen

vue: Datenhijacking

vue.js nutzt Datenhijacking in Kombination mit dem Publisher-Subscriber-Modell, um jede Eigenschaft über Object.defineProperty() zu kapern. Die Setter und Getter veröffentlichen Nachrichten an Abonnenten, wenn sich Daten ändern, und löst entsprechende Abhörrückrufe aus. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

Der Code ist direkt unten

Das erste ist natürlich Hallo Welt

vue

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

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

Nach dem Login kopieren

Angular

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

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

Nach dem Login kopieren

Im Vergleich dazu verwendet Vue das JSON-Datenformat zum Schreiben von Dom und Daten, und der Schreibstil ähnelt eher js Das Datenkodierungsformat ist leicht zu verstehen.

Die bidirektionale Datenbindung von Vue

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

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

Nach dem Login kopieren

Die bidirektionale Datenbindung von Angular

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

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

Nach dem Login kopieren

Obwohl Vue ein leichtgewichtiges Framework ist, ist dies bei der von ihm bereitgestellten API der Fall Tatsächlich gibt es viele, einschließlich einiger praktischer Anweisungen und Attributoperationen. Im Allgemeinen verwenden Vue-Anweisungen den (v-)-Operator, verglichen mit AngularJS-Anweisungen, die (ng-) verwenden. Unter anderem unterstützt vue.js auch die Abkürzung von Anweisungen:

(1) Ereignisklick

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

Abkürzung:
<a @click="fn"></a>
(2) Attribute

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

Abkürzung:
<a :href="url"></a>

vue.渲染列表

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

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

Nach dem Login kopieren

Angularjs渲染列表

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

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

Nach dem Login kopieren

vue的循环

<ul>
    <li v-for="item in list">
        <a :href="item.url">{{item.title}}</a>
    </li>
</ul>

Nach dem Login kopieren

angular和vue的渲染差不多

<p class="item" ng-repeat="news in  newsList">
    <a ng-href="#/content/{{news.id}}">
        <img ng-src="{{news.img}}" />
        <p class="item-info">
            <h3 class="item-title">{{news.title}}</h3>
            <p class="item-time">{{news.createTime}}</p>
        </p>
    </a>
</p>

Nach dem Login kopieren

vue和Angular处理用户输入

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren