Comparaison avec Angularjs et Vue.js-js tutoriel-php.cn

Le contenu de cet article concerne la comparaison entre Angularjs et Vue.js. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Comparaison entre l'utilisation d'Angularjs et Vue.js

Les projets précédents utilisaient tous Angularjs, (veuillez noter que cet article parle principalement de Angularjs 1) Au préalable Faites une simple note de comparaison après avoir utilisé Vue.js.

Tout d’abord, parlons brièvement de leurs caractéristiques respectives en théorie, puis utilisons quelques petits exemples pour les illustrer.

Angulaire

1, MVVM (Modèle) (Vue) (Vue-modèle)
2, Modulaire (Module ) Injection de dépendance du contrôleur (Contoller) :
3. Liaison de données bidirectionnelle : les opérations de l'interface peuvent être reflétées dans les données en temps réel et les modifications apportées aux données peuvent être affiché dans l'interface en temps réel.
4, commande (ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
5, Service($compile $filter $interval $timeout $http...)
6, Routage (routage natif ng-Route), ui-router( Routage composant)
7, encapsulation Ajax ($http)

L'implémentation de la liaison de données bidirectionnelle utilise la valeur sale de $scope variable Pour la détection, utilisez $scope.$watch (vue au modèle) et $scope.$apply (modèle à afficher) pour la détection. Digest est appelé en interne. Bien sûr, $scope.$digest peut également être appelé directement pour une vérification sale. . Il convient de noter que lorsque les données changent très fréquemment, la détection sale consommera beaucoup de performances du navigateur. La valeur maximale officielle de détection sale est de 2 000 éléments de données.

Vue

site officiel de vue.js : Il s'agit d'un

framework progressif pour créer des interfaces utilisateur. Contrairement à d'autres frameworks lourds, Vue adopte une conception de développement incrémental ascendant. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue et est très facile à apprendre et à intégrer avec d'autres bibliothèques ou projets existants. Vue, d'autre part, est tout à fait capable de piloter des applications complexes d'une seule page développées à l'aide de Composants de fichier unique et de Bibliothèques prises en charge par l'écosystème Vue.

L'objectif de Vue.js est d'implémenter une

liaison de données réactive et des composants de vue composées avec l'API la plus simple possible.

(1) Modularisation Actuellement, le moyen le plus populaire consiste à utiliser directement la modularité ES6 dans le projet et à la combiner avec Webpack pour le packaging du projet

vue est très petite. Après compression, le code source minimum est de 72,9 Ko. Après compression gzip, il ne fait que 25,11 Ko par rapport à Angular. plug-ins de bibliothèque requis, similaires au plug-in de routage (Vue-router), aux plug-ins Ajax (vue-resource, axios), etc.

Principe de liaison de données bidirectionnelle Vue et Angular

angular.js : Vérification des valeurs sales

angular.js utilise la détection des valeurs sales pour comparer si les données ont changé afin de décider s'il faut mettre à jour la vue . Le moyen le plus simple est d'interroger régulièrement pour détecter les changements de données via setInterval(). Bien sûr, Google ne le fera pas. Si bas, Angular n'entre dans la détection de valeurs sales que lorsqu'un événement spécifié est déclenché, à peu près comme suit :

Événements DOM, tels que les utilisateurs saisissant du texte, cliquant sur des boutons, etc. (ng-click)
Événement de réponse XHR ($http)
Événement de changement d'emplacement du navigateur ($location)
Événement de minuterie ($timeout, $interval)
Exécuter $digest() ou $apply()

vue : Détournement de données

vue.js utilise le piratage de données combiné au modèle éditeur-abonné pour détourner chaque propriété via Object.defineProperty() Les setters et getters publient des messages aux abonnés lorsque les données changent, déclenchant les rappels d'écoute correspondants. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

Le code est directement en dessous

Le premier est bien sûr Bonjour World

vue

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

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

Copier après la connexion

Angular

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

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

Copier après la connexion

En comparaison, vue utilise le format de données json pour écrire dom et data, et le style d'écriture est plus similaire à js Le format d'encodage des données est facile à comprendre.

Liaison de données bidirectionnelle de Vue

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

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

Copier après la connexion

Liaison de données bidirectionnelle d'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!";
});

Copier après la connexion

Bien que vue soit un framework léger, l'API qu'il fournit est en effet, il y en a beaucoup, y compris des instructions et des opérations d'attributs pratiques. Généralement, les instructions Vue utilisent l'opérateur (v-), par rapport aux instructions angulaires utilisant (ng-). Parmi eux, vue.js prend également en charge l'abréviation des instructions :

(1) clic d'événement

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

<a @click="fn"></a>
(2) Attributs

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

<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' }
    ]
  }
})

Copier après la connexion

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' }
    ]
});

Copier après la connexion

vue的循环

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

Copier après la connexion

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>

Copier après la connexion

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('')
    }
  }
})

Copier après la connexion

<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('')
    }
});

Copier après la connexion