Explication détaillée de la façon d'utiliser la montre dans Vue ? Introduction à l'utilisation de la montre

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

Voici ce que se produit lors de l'utilisation de watch Une caractéristique est 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 change. 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 dans les données Seules les données peuvent détecter les changements. À ce stade, 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 d'une chaîne pour surveiller l'attribut de l'objet :

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

Cela ajoutera uniquement un écouteur à un attribut spécifique de l'objet.

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.

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!