Quelles sont les différences entre Angularjs et Vue.js ? Comparaison simple

Tutoriels associés recommandés : "Tutoriel AngularJs"

Choisissez Vue au lieu d'Angular pour les raisons suivantes, qui bien sûr ne conviennent pas à tout le monde. conviennent pour :

Vue.js est beaucoup plus simple qu'Angular en termes d'API et de conception, vous pouvez donc rapidement maîtriser toutes ses fonctionnalités et commencer à développer.

Vue.js est une solution plus flexible et ouverte. Il vous permet d'organiser votre application comme vous le souhaitez sans avoir à suivre à tout moment les règles établies par Angular. Il s'agit simplement d'une couche de vue, vous pouvez donc l'intégrer dans une page existante sans nécessairement en faire une énorme application d'une seule page. Cela vous donne plus d’espace pour travailler avec d’autres bibliothèques, mais vous devez en retour prendre davantage de décisions architecturales. Par exemple, le noyau de Vue.js n'inclut pas les fonctionnalités de routage et Ajax par défaut et suppose généralement que vous utilisez un système de construction de modules dans votre application. C'est probablement la distinction la plus importante.

Angular utilise la liaison bidirectionnelle et Vue prend également en charge la liaison bidirectionnelle, mais la valeur par défaut est la liaison unidirectionnelle et les données sont transmises du composant parent au composant enfant dans une direction. Utilisez la liaison unidirectionnelle dans les applications volumineuses pour faciliter la compréhension du flux de données.

Les instructions et les composants sont plus clairement séparés dans Vue.js. Les directives n'encapsulent que les opérations DOM, tandis que les composants représentent une unité indépendante autonome - avec sa propre vue et sa propre logique de données. Il y a beaucoup de confusion entre les deux dans Angular.

Vue.js a de meilleures performances et est très, très facile à optimiser car il n'utilise pas de vérification sale. Angular deviendra de plus en plus lent à mesure qu'il y aura de plus en plus d'observateurs, car tous les observateurs doivent être recalculés pour chaque changement de portée. De plus, si certains observateurs déclenchent une autre mise à jour, le cycle de résumé devra peut-être s'exécuter plusieurs fois. Les utilisateurs angulaires ont souvent recours à des techniques ésotériques pour résoudre le problème des boucles de contrôle sales. Parfois, il n’existe pas de moyen simple d’optimiser une portée avec un grand nombre d’observateurs.

Vue.js n'a pas du tout ce problème, car il utilise un système d'observation basé sur le suivi des dépendances et les mises à jour de files d'attente asynchrones. Toutes les modifications de données sont déclenchées indépendamment, sauf s'il existe une dépendance claire entre elles. La seule optimisation nécessaire est d'utiliser track-by sur v-for.

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

Les projets précédents utilisaient tous Angularjs (veuillez noter que l'objectif principal ici est Angularjs 1) Faites une brève note de comparaison après l'utilisation initiale de Vue. js.
Tout d’abord, parlons brièvement de leurs caractéristiques respectives sur le plan théorique, puis utilisons quelques petits exemples pour les illustrer.

Angulaire

• 1, MVVM (Modèle) (Vue) (Vue-modèle)
• 2, Injection de dépendances du contrôleur de module (Contoller) :
• 3. Liaison de données bidirectionnelle : les opérations d'interface peuvent être reflétées dans les données en temps réel et les modifications des données peuvent être affichées dans l'interface en temps réel.
• 4, commande (ng-click ng-model ng-href ng-src ng-if...)
• 5, service Service($compile $filter $interval $timeout $http ...)

L'implémentation de la liaison de données bidirectionnelle utilise la détection de valeurs sales des variables $scope, en utilisant $scope.$watch (vue vers le modèle), $scope.$apply (modèle vers View), les appels internes sont résumés, bien sûr, vous pouvez également appeler directement $scope.$digest 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 la création d'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 à d'autres bibliothèques ou projets existants. Vue, en revanche, est tout à fait capable de piloter des applications complexes d'une seule page développées avec des composants et des bibliothèques à fichier unique pris en charge par l'écosystème Vue.

L'objectif de Vue.js est de permettre une liaison de données réactive et des composants de vue composés via 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.
• (2) Componentisation pour créer un seul Le fichier de composant avec le suffixe .vue contient un modèle (code html), un script (code es6), un style (style css)
• (3) le routage,

vue est très petite , Après compression, le code source minimum est de 72,9 Ko, et après compression gzip, il n'est que de 25,11 Ko, soit 144 Ko par rapport à Angular. Vous pouvez l'utiliser vous-même avec les plug-ins de bibliothèque requis, tels que les plug-ins de routage. (Vue-router), plug-ins Ajax (vue-resource), etc.

Le code est directement en dessous

Le premier est bien sûr 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";});

En comparaison, vue utilise le format de données json pour écrire dom et les données, et le style d'écriture est davantage basé sur le format d'encodage des données js, qui est facile à comprendre.

Liaison de données bidirectionnelle de vue

<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的双向数据绑定

<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虽然是一个轻量级的框架，提供的API确非常多，包括一些便捷的指令和属性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js还支持指令的简写方式：

• (1)事件click

  简写方式：

• (2)属性

  []（http://www.cnblogs.com/summer7310/p/url)）
  简写方式：

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

相关教程推荐：《angular教程》、《vue教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!