A quoi sert vue watch ?

L'utilisation de vue watch est la suivante : 1. Lorsque la valeur fullName change, la montre écoute et s'exécute ; 2. La montre exécute la méthode du gestionnaire et l'attribut immédiat ; 3. Utilisez l'attribut profond, la surveillance approfondie et les attributs sous l'objet couramment utilisé Change.

[Recommandations d'articles connexes : vue.js]

L'utilisation de la montre vue est :

1. Utilisation de base :

Lorsque la valeur fullName change, watch surveille et exécute

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

2. L'exemple ci-dessus est que la surveillance n'est exécutée que lorsque la valeur change. Nous voulons que la surveillance soit exécutée lorsque la valeur est initialement modifiée, nous utilisons donc les attributs

et

handler

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

immediate 3. attribut profond (surveillance approfondie, expressions couramment utilisées Modifications des attributs sous l'objet)

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: &#39;#root&#39;,
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log(&#39;obj.a changed&#39;);
      },
      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 n'écoute que les changements dans la référence de l'attribut obj. Il n'écoutera que lorsque nous attribuons une valeur à obj. Par exemple, nous réattribuons obj dans la fonction hook d'événement montée :

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

Alors, de quoi avons-nous besoin pour surveiller la valeur de l'attribut a dans obj ? C'est à ce moment-là que l'attribut deep est utile :

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

Cette méthode a un grand impact sur les performances. La modification de n'importe quel attribut dans obj déclenchera le gestionnaire dans l'écouteur. Nous pouvons effectuer le traitement suivant :

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

Je n'entrerai pas ici dans les détails de la déconnexion de la montre. Dans le développement réel, la montre sera détruite avec les composants.

Recommandations d'apprentissage gratuites associées :

javascript

(vidéo)

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!