Propriété watch de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue3,watchLa propriété est utilisée pour écouter les changements d'une donnée dans l'instance Vue et exécuter la fonction de rappel correspondante lorsque la donnée change.

watchElle nous permet d'observer et de réagir aux changements de données spécifiques dans l'instance Vue, et ainsi d'effectuer certains effets secondaires, tels que la mise à jour du DOM, l'exécution de requêtes réseau, etc.

2. Utilisation de base de la propriété watch

Dans Vue3,watchla propriété peut être utilisée des manières suivantes :

Exemple

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`le compte a changé de ${oldValue}à ${newValue}`);
    });

    return {
      count
    };
  }
};

3. Explication du code

Dans le code ci-dessus :

  • Tout d'abord, nous utilisonsrefpour créer une donnée réactivecount, et définir sa valeur initiale à 0.
  • Ensuite, nous utilisonswatchla fonction pour écouter lescountchangements.watchaccepte deux paramètres :
    • Le premier paramètre est la donnée que nous voulons écouter (ici c'estcount）。
    • Le deuxième paramètre est une fonction de rappel, qui sera déclenchée lorsque les données surveillées changent. La fonction de rappel reçoit deux paramètres :
      • newValue: la nouvelle valeur après le changement des données.
      • oldValue: l'ancienne valeur avant le changement des données.

4. Utilisation avancée de la propriété watch

En plus d'écouter une seule donnée,watchvous pouvez également écouter plusieurs données, ou écouter une expression complexe.

4.1 Écoute de plusieurs données

Exemple

import { ref, watch } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
      console.log(`firstName changed from ${oldFirstName}to ${newFirstName}`);
      console.log(`lastName changed from ${oldLastName}to ${newLastName}`);
    });

    return {
      firstName,
      lastName
    };
  }
};

Dans cet exemple, nous avons écoutéfirstNameetlastNamechangements dans deux données. Lorsque l'une d'elles change, la fonction de rappel sera déclenchée.

4.2 Écoute des expressions complexes

Exemple

import { ref, watch } from 'vue';

export default {
  setup() {
    const user = ref({
      name: 'Alice',
      age: 25
    });

    watch(
      () => user.value.age, // Écouter les changements dans user.age
      (newAge, oldAge) => {
        console.log(`âge changé de ${oldAge}à ${newAge}`);
      }
    );

    return {
      user
    };
  }
};

Dans cet exemple, nous utilisons une fonction pour écouteruser.agechangements. Cette approche convient pour écouter une propriété à l'intérieur d'un objet.

5. Options pour la propriété watch

watchLa fonction accepte également un troisième paramètre, qui est un objet de configuration optionnel pouvant être utilisé pour personnaliser le comportement d'écoute.

Exemple

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`le compte a changé de ${oldValue}à ${newValue}`);
    }, {
      immediate: true, // Exécuter la fonction de rappel immédiatement
      deep: true // Écoute profonde, adaptée pour écouter des objets ou des tableaux
    });

    return {
      count
    };
  }
};
  • immediate: true: indique que la fonction de rappel est exécutée immédiatement lorsque l'écoute commence, plutôt que d'attendre que les données changent.
  • deep: true: indique une écoute profonde, adaptée pour écouter les changements dans les objets ou les tableaux.

Vue3 选项式 APIVue3 API des options

Autres extensions