Observateurs Vue.js

Un observateur Vue vous permet d'écouter les données du composant et de l'exécuter chaque fois qu'une propriété particulière change

Un observateur est une fonctionnalité spéciale de Vue.js qui vous permet d'espionner une propriété de l'état du composant et d'exécuter une fonction lorsque la valeur de cette propriété change.

Voici un exemple. Nous avons un composant qui affiche un nom, et vous permet de le changer en cliquant sur un bouton:

<template>
  <p>My name is {{name}}</p>
  <button @click="changeName()">Change my name!</button>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, methods: { changeName: function() { this.name = ‘Flavius’ } } } </script>

Lorsque le nom change, nous voulons faire quelque chose, comme imprimer un journal de console.

Nous pouvons le faire en ajoutant à lawatchobject une propriété nommée comme propriété de données que nous voulons surveiller:

<script>
export default {
  data() {
    return {
      name: 'Flavio'
    }
  },
  methods: {
    changeName: function() {
      this.name = 'Flavius'
    }
  },
  watch: {
    name: function() {
      console.log(this.name)
    }
  }
}
</script>

La fonction attribuée àwatch.namepeut éventuellement accepter 2 paramètres. Le premier est la nouvelle valeur de propriété. La seconde est l'ancienne valeur de la propriété:

<script>
export default {
  /* ... */
  watch: {
    name: function(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

Les observateurs ne peuvent pas être recherchés à partir d'un modèle comme vous pouvez le faire avec des propriétés calculées.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: