Principe réactif approfondi
Nous avons déjà parlé de la plupart du contenu de base, et maintenant nous allons parler du contenu sous-jacent. L'une des caractéristiques les plus importantes de Vue.js est le système de réponse - le modèle n'est qu'un objet normal, et la modification mettra à jour la vue. Cela rend la gestion de l'État très simple et intuitive, mais la compréhension de ses principes est également importante et peut éviter certains problèmes courants. Ensuite, nous commencerons à creuser profondément dans les détails sous-jacents du système de réponse Vue.js.
Comment suivre les changements
En passant un objet normal à l'instance Vue comme option de données, Vue.js traversera ses propriétés et les convertira en getter / setter avec object.defineproperty. Il s'agit d'une fonctionnalité ES5 et ne peut pas être implémentée avec des correctifs. C'est pourquoi Vue.js ne prend pas en charge IE8 et plus bas.
Les utilisateurs ne peuvent pas voir Getters / Setters, mais en interne, ils permettent à Vue.js de suivre les dépendances, notifiant les modifications lorsque les propriétés sont accessibles et modifiées. Un problème est que le formatage Getter / Setter est différent lors de l'impression d'objets de données sur la console du navigateur, et l'utilisation de la méthode d'instance VM. $ Log () peut obtenir une sortie plus conviviale.
Chaque liaison d'instructions / données dans le modèle a un objet d'observateur correspondant, qui enregistre les attributs sous forme de dépendances pendant le processus de calcul. Après cela, lorsque le secteur dépendant sera appelé, le recalcul de l'observateur sera déclenché, ce qui entraînera également la mise à jour de ses instructions associées.
Problème de détection de modification
En raison des restrictions ES5, Vue.js ne peut pas détecter l'addition ou la suppression des propriétés de l'objet. Étant donné que Vue.js convertit la propriété en Getter / Setter lors de l'initialisation de l'instance, la propriété doit être sur l'objet de données pour permettre à Vue.js de le convertir pour le rendre réactif. Par exemple:
var data = {a: 1} var vm = new Vue ({data: data}) // `vm.a` et` data.a` sont désormais réactifs vm.b = 2 // `vm.b` n'est pas réactif.Cependant, il existe un moyen d'ajouter des attributs après la création d'instructions et de le rendre réactif.
Pour les instances Vue, vous pouvez utiliser la méthode d'instance $ set (clé, valeur):
vm. $ set ('b', 2) // `vm.b` et` data.b` sont maintenant réactifsPour les objets de données normaux, la méthode globale vue.set (objet, clé, valeur):
Vue.set (data, 'c', 3) // `vm.c` et` data.c` sont maintenant réactifs
Parfois, vous souhaitez ajouter des propriétés à un objet existant, comme l'utilisation d'objet.assign () ou _.Extend () pour ajouter des propriétés. Cependant, les nouvelles propriétés ajoutées à l'objet ne déclenchent pas de mises à jour. À l'heure actuelle, vous pouvez créer un nouvel objet, y compris les propriétés de l'objet d'origine et les nouvelles propriétés:
// n'utilise pas `object.assign (this.someObject, {a: 1, b: 2})` this.someObject = object.assign ({}, this.someObject, {a: 1, b: 2})Il existe également des problèmes liés à la gamme qui ont été discutés dans le rendu de la liste auparavant.
Initialiser les données
Bien que Vue.js fournit une API pour ajouter dynamiquement les attributs de réponse, il est recommandé de déclarer tous les attributs de réponse sur les objets de données.
Ne faites pas ceci:
var vm = new Vue ({template: '<div> {{msg}} </div>'}) // Ajoutez ensuite `msg`vm. $ set ('msg', 'bonjour!')Faites ceci:
var vm = new Vue ({data: {// Declare `msg` msg: ''}, modèle: '<div> {{msg}} </div>'}) // Définit` msg`vm.msg = 'Bonjour!'Il y a deux raisons de faire cela:
1. L'objet de données est comme un schéma de l'état des composants. La déclaration de toutes les propriétés à ce sujet rend le code composant plus facile à comprendre.
2. L'ajout d'une propriété de réponse de haut niveau force tous les observateurs à recalculer car il n'existait pas auparavant et aucun observateur ne le suit. Cette performance est généralement acceptable (en particulier par rapport aux vérifications sales d'Angular), mais peut être évitée lors de l'initialisation.
File d'attente de mise à jour asynchrones
Vue.js est par défaut à mettre à jour le DOM. Chaque fois que des changements de données sont observés, Vue démarre une file d'attente pour mettre en cache tous les changements de données dans la même boucle d'événements. Si un observateur est tiré plusieurs fois, il ne sera poussé dans la file d'attente. Attendez la prochaine boucle d'événements, Vue effacera la file d'attente et effectuera uniquement les mises à jour DOM nécessaires. MutationObserver est préféré dans les files d'attente asynchrones internes, et Settimeout (FN, 0) est utilisé s'il n'est pas pris en charge.
Par exemple, avec VM.SomeData = 'New Value' Ensemble, le DOM ne mettra pas à jour immédiatement, mais mettra à jour la prochaine fois que la boucle d'événement effacera la file d'attente. Nous n'avons essentiellement pas à nous soucier de ce processus, mais cela vous aidera si vous voulez faire quelque chose une fois le statut Dom mis à jour. Bien que Vue.js encourage les développeurs à suivre l'approche basée sur les données et à éviter de modifier directement le DOM, il le fait parfois. Afin d'attendre que Vue.js termine la mise à jour du DOM après les modifications des données, vous pouvez utiliser Vue.Nexttick (rappel) immédiatement après les modifications des données. Le rappel est appelé une fois la mise à jour DOM terminée. Par exemple:
<div id = "example"> {{msg}} </div>
var vm = new vue ({el: '#example', data: {msg: '123'}}) vm.msg = 'new message' // modifier les données vm. $ el.textContent === 'new message' // falsevue.nextTick (function () {vm. $ el.textcontent === 'new Message' // true})Cette méthode d'instance est plus pratique car elle ne nécessite pas Global Vue, et ce rappel est automatiquement lié à l'instance Vue actuelle:
Vue.component ('example', {template: '<span> {{msg}} </span>', data: function () {return {msg: 'non mis à jour'}}, méthodes: {updateMessage: function () {this.msg = 'mis à jour' console.log (this. $ El.TextContent) // => ' {console.log (this. $ el.textContent) // => 'mis à jour'})}}})Le secret des attributs informatiques
Vous devez noter que les propriétés calculées de Vue.js ne sont pas des getters simples. Les propriétés de calcul suivent continuellement ses dépendances de réponse. Lors du calcul d'une propriété calculée, Vue.js met à jour sa liste de dépendances et met en cache les résultats. Les résultats mis en cache ne sont invalides que lorsque l'une des dépendances change. Par conséquent, tant que la dépendance ne change pas, l'accès à la propriété calculée renvoie directement le résultat mis en cache au lieu d'appeler Getter.
Pourquoi cache? Supposons que nous ayons une propriété de calcul de grande envergure A, qui va parcourir un réseau géant et faire beaucoup de calculs. Ensuite, il peut y avoir d'autres propriétés calculées qui dépendent de A. S'il n'y a pas de cache, nous appellerons le Getter de A plusieurs fois, plus que nécessaire.
Étant donné que la propriété calculée est mise en cache, Getter n'est pas toujours appelé lors de l'accès. Considérez l'exemple suivant:
var vm = new vue ({data: {msg: 'hi'}, calculé: {exemple: function () {return date.now () + this.msg}}})L'exemple de propriété calculé n'a qu'une seule dépendance: vm.msg. Date.now () n'est pas une dépendance de la réponse car cela n'a rien à voir avec le système d'observation des données de Vue. Par conséquent, lors de l'accès à VM.example, l'horodatage se fera rester inchangé à moins que VM.MSG ne change.
Parfois, j'espère que Getter ne change pas le comportement d'origine et ne appelle pas chaque fois que j'accède à vm.example. À l'heure actuelle, le cache peut être désactivé pour l'attribut calculé spécifié:
calculé: {exemple: {cache: false, get: function () {return date.now () + this.msg}}}Maintenant, chaque fois que vous accédez à VM.example, l'horodatage est nouveau. Cependant, accéder à JavaScript est comme ça; La liaison des données est toujours motivée par les dépendances. Si l'attribut calculé {{exemple}} est lié dans le module, le DOM ne sera mis à jour que si la dépendance de la réponse change.
Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.