Comment utiliser watch dans Vue pour surveiller les modifications de plusieurs données

Vue est un framework JavaScript populaire qui fournit un mécanisme de liaison de données très utile. L'objet watch dans Vue est une fonctionnalité très importante, il peut nous aider à surveiller les changements dans des données uniques ou multiples. Cet article explique comment utiliser les objets de surveillance dans Vue pour surveiller les modifications de plusieurs données.

Tout d'abord, nous devons comprendre ce qu'est l'objet watch dans Vue. L'objet watch est une option utilisée dans les composants Vue pour surveiller les modifications des données. Nous pouvons utiliser l'option watch pour observer la valeur d'une expression. Lorsque la valeur de l'expression change, watch exécutera automatiquement la fonction de rappel correspondante. Dans Vue, nous pouvons spécifier l'objet watch sous forme de chaîne, de fonction ou d'objet. Dans cet article, nous utiliserons un objet pour spécifier les options de surveillance.

Supposons que nous ayons un composant Vue qui contient deux propriétés de données : message et count. Nous souhaitons écouter les changements dans ces deux données et mettre à jour les éléments correspondants sur la page. Tout d'abord, nous devons ajouter un objet watch aux options du composant :

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello',
      count: 0
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    },
    count: function (newVal, oldVal) {
      console.log('count changed from ' + oldVal + ' to ' + newVal)
    }
  },
  template: '<div>{{ message }} {{ count }}</div>'
})

Dans le code ci-dessus, nous ajoutons un objet watch aux options du composant Vue. Cet objet de surveillance possède deux attributs, correspondant respectivement aux attributs de message et de données de comptage. Chaque propriété a une fonction anonyme comme valeur. Ces deux fonctions seront appelées à chaque fois que l'attribut de données correspondant change. Les deux fonctions acceptent deux paramètres : la nouvelle valeur et l'ancienne valeur. Nous pouvons exécuter n'importe quel code que nous voulons dans ces fonctions. Dans l'exemple ci-dessus, nous avons simplement imprimé un message sur la console.

Nous pouvons également utiliser l'option de surveillance de la profondeur pour surveiller plusieurs couches de données. Une surveillance approfondie dans Vue signifie que le rappel de surveillance ne sera déclenché que lorsque la valeur d'une propriété d'objet ou de tableau change. Dans Vue, par défaut, une seule couche de modifications de données peut être détectée. Si vous devez surveiller les modifications des données multicouches dans l'objet de surveillance, vous devez ajouter le caractère de profondeur ($) au nom de l'attribut.

Vue.component('my-component', {
  data: function () {
    return {
      person: {
        name: 'Bob',
        age: 30
      }
    }
  },
  watch: {
    'person.name': {
      handler: function (newVal, oldVal) {
        console.log('person.name changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    },
    'person.age': {
      handler: function (newVal, oldVal) {
        console.log('person.age changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    }
  },
  template: '<div>{{ person.name }} {{ person.age }}</div>'
})

Dans cet exemple, nous surveillons les changements dans les attributs de nom et d'âge de l'objet personne. Étant donné que l'objet personne est un objet imbriqué, nous devons ajouter un caractère de profondeur avant le nom de l'attribut afin que Vue puisse surveiller en profondeur les modifications de ces attributs.

Dans cet article, nous expliquons comment utiliser les objets de surveillance dans Vue pour surveiller les modifications de plusieurs données. Nous avons expliqué comment utiliser l'option de surveillance pour observer les modifications dans une seule donnée et comment utiliser l'option de surveillance approfondie pour observer les modifications apportées à une propriété d'objet ou de tableau. Dans Vue, watch est une fonctionnalité très pratique, qui nous permet de surveiller facilement les modifications des données et d'effectuer les opérations correspondantes.

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!