Comment utiliser la montre dans Vue

Cette fois, je vais vous montrer comment utiliser watch dans Vue. Quelles sont les précautions lors de l'utilisation de watch dans Vue. Voici des cas pratiques, jetons un coup d'oeil.

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 la façon dont nous écrivons watch. Le code de watch 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. écrit 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 le changement de référence de l'attribut obj. Il ne le surveillera que lorsque nous attribuons une valeur à obj. Par exemple, nous utilisons l'événement monté . fonction hook pour surveiller obj. Réaffecter :

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 :

Un résumé de la méthode d'utilisation de JS pour déterminer le contenu contenu dans une chaîne

Angulaire +RouterLink fait un saut de fantaisie différent

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!