Explication détaillée de l'utilisation de watch dans vue.js

En vue, utilisez watch pour répondre aux modifications de données. Il existe environ trois façons d’utiliser la montre. Le code suivant est une utilisation simple de watch :

<input type="text" v-model="cityName"/>

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {
      // ...
    }
  } 
})

Écrivez directement une fonction de traitement d'écoute et exécutez la fonction à chaque fois que la valeur cityName change. Vous pouvez également ajouter le nom de la méthode sous forme de chaîne directement après les données surveillées :

watch: {
    cityName: 'nameChange'
    }
 }

immédiat et gestionnaire

Il existe une fonctionnalité lors de l'utilisation watch de cette façon.C'est-à-dire que lorsque la valeur est liée pour la première fois, la fonction d'écoute ne sera pas exécutée. Elle ne sera exécutée que lorsque la valeur changera. Si nous devons exécuter la fonction lorsque la valeur est initialement liée, nous devons utiliser l'attribut immédiat.

Par exemple, lorsqu'un composant parent transfère dynamiquement une valeur à un composant enfant et que les accessoires du composant enfant obtiennent d'abord la valeur par défaut transmise par le composant parent, il doit également exécuter la fonction. immédiat doit être défini sur true.

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...
    　　},
    　　immediate: true
    }
  } 
})

Les données surveillées sont ensuite écrites sous forme d'objet, y compris la méthode de gestionnaire et immédiate. La fonction que nous avons écrite auparavant écrit en fait cette méthode de gestionnaire

immédiate lorsqu'elle est liée pour la première fois dans watch ; , s'il faut exécuter le gestionnaire. Si la valeur est vraie, cela signifie que la méthode du gestionnaire sera exécutée immédiatement lorsqu'elle est déclarée dans la montre. Si la valeur est fausse, elle sera exécutée lorsque les données changent, tout comme la normale. montre.

profond

Lorsqu'il est nécessaire de surveiller les modifications dans un objet, la méthode de surveillance ordinaire ne peut pas surveiller les modifications dans les propriétés internes de l'objet uniquement les données dans data. peut être surveillé Changement, à ce moment, l'attribut profond est nécessaire pour surveiller en profondeur l'objet.

<input type="text" v-model="cityName.name"/>

new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,
    immediate: true
    }
  } 
})

Définissez deep : true pour surveiller les modifications dans cityName.name À ce stade, cet écouteur sera ajouté à toutes les propriétés de cityName. Lorsque l'objet a de nombreuses propriétés, les modifications de chaque valeur de propriété seront exécutées. gestionnaire. Si vous n'avez besoin de surveiller qu'une seule valeur d'attribut dans l'objet, vous pouvez effectuer l'optimisation suivante :

Utilisez la forme de chaîne pour surveiller l'attribut de l'objet :

watch: {
    'cityName.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

Cela ne donnera qu'un attribut spécifique de l'objet Ajouter un écouteur.

Les modifications dans les tableaux (unidimensionnels, multidimensionnels) ne nécessitent pas une surveillance approfondie, mais les modifications des propriétés des objets dans les tableaux d'objets nécessitent une surveillance approfondie.

Recommandations associées :

Un résumé des questions d'entretien de vue frontale en 2020 (avec réponses)

Tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!