Résumé de l'utilisation de la montre dans Vue

Cette fois, je vais vous apporter un résumé de la façon d'utiliser watch dans Vue. Quelles sont les précautions lors de l'utilisation de watch dans Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Supposons qu'il y ait le code suivant :

<p>
   <p>FullName: {{fullName}}</p>
   <p>FirstName: <input type="text" v-model="firstName"></p>
</p>
new Vue({
 el: '#root',
 data: {
  firstName: 'Dawei',
  lastName: 'Lou',
  fullName: ''
 },
 watch: {
  firstName(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  }
 } 
})

L'effet du code ci-dessus est que lorsque nous entrons firstName, wacth surveille la nouvelle valeur de chaque modification, puis calcule et affiche fullName .

Méthode de gestion et attribut immédiat

Une caractéristique de watch ici est qu'elle ne sera pas exécutée lorsqu'elle est initialement liée, et le calcul de surveillance ne sera pas exécuté tant que firstName ne changera pas. Et si nous voulons exécuter le changement lorsqu’il est initialement lié ? Nous devons modifier notre méthode d'écriture de surveillance. Le code de surveillance modifié est le suivant :

watch: {
 firstName: {
  handler(newName, oldName) {
   this.fullName = newName + ' ' + this.lastName;
  },
  // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
  immediate: true
 }
}

Avez-vous remarqué le gestionnaire ? Nous avons lié une méthode de gestionnaire à firstName. par défaut. C'est le gestionnaire, Vue.js gérera cette logique, et la version finale compilée est en fait ce gestionnaire.

Et immédiat : true signifie que si firstName est déclaré dans wacth, la méthode du gestionnaire à l'intérieur sera exécutée immédiatement si elle est fausse, l'effet sera le même que notre précédent, et il ne sera pas exécuté. pendant la liaison.

attribut profond

Il existe également un attribut profond dans watch. La valeur par défaut est false, qui indique s'il faut surveiller en profondeur. Par exemple, il existe un attribut obj. dans nos données :

<p>
   <p>obj.a: {{obj.a}}</p>
   <p>obj.a: <input type="text" v-model="obj.a"></p>
</p>
new Vue({
 el: '#root',
 data: {
  obj: {
   a: 123
  }
 },
 watch: {
  obj: {
   handler(newName, oldName) {
     console.log('obj.a changed');
   },
   immediate: true
  }
 } 
})

Lorsque nous sommes entrés dans la vue des données dans la zone de saisie pour modifier la valeur de obj.a, nous avons constaté qu'elle n'était pas valide. En raison des limitations du JavaScript moderne (et de la dépréciation d'Object.observe), Vue ne peut pas détecter l'ajout ou la suppression de propriétés d'objet. Étant donné que Vue effectue le processus de conversion getter/setter sur la propriété lors de l'initialisation de l'instance, la propriété doit exister sur l'objet de données pour que Vue la convertisse afin qu'elle soit réactive.

Par défaut, le gestionnaire surveille uniquement les modifications dans la référence de l'attribut obj. Il ne surveillera les modifications que lorsque nous attribuons une valeur à obj. Par exemple, lorsque nous utilisons le monté <.> événement Réaffecter obj dans la fonction hook :

mounted: {
 this.obj = {
  a: '456'
 }
}

De cette façon, notre gestionnaire sera exécuté et obj.a modifié sera imprimé.

Au contraire, que se passe-t-il si nous devons surveiller la valeur de l'attribut a dans obj ? C’est à ce moment-là que l’attribut profond devient utile !

watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  deep: true
 }
}

Profond signifie une observation approfondie. L'écouteur traversera couche par couche et ajoutera cet écouteur à toutes les propriétés de l'objet. Cependant, la surcharge de performances sera très importante. Toute modification d'une propriété dans obj. déclenchera le gestionnaire dans cet écouteur.

Optimisation, nous pouvons utiliser le formulaire

chaîne pour surveiller.

watch: {
 'obj.a': {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true,
  // deep: true
 }
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Résumé de l'utilisation du module de journal nodejs winston

opération vue+vue-router+vuex autorisations

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!