fonction watch dans Vue3 : surveiller les changements de données

Vue3 est actuellement un framework JavaScript populaire, qui simplifie le processus de développement et améliore l'efficacité du développement et la qualité du code. Dans Vue3, la fonction de surveillance peut facilement surveiller les modifications des données et effectuer les opérations correspondantes. Cet article présentera l'utilisation de base et les précautions de la fonction de surveillance dans Vue3.

1. Utilisation de base de la fonction de surveillance

L'utilisation de la fonction de surveillance dans Vue3 est différente de celle de Vue2. La fonction de surveillance dans Vue3 est implémentée sur la base du proxy ES6, offrant une méthode de surveillance des données plus flexible. Dans Vue3, nous pouvons utiliser la fonction watch pour surveiller les changements dans une seule donnée, ou nous pouvons utiliser la fonction watch pour surveiller les changements dans plusieurs données en même temps.

1. Surveiller les modifications d'une seule donnée

Surveiller les modifications d'une seule donnée est très simple, il suffit d'utiliser la fonction montre dans la fonction de configuration. Par exemple :

import { watch, ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
    watch(name, (newValue, oldValue) => {
      console.log(`Name changed from ${oldValue} to ${newValue}`)
    })
    return {
      name
    }
  }
}

Dans le code ci-dessus, nous définissons un nom de variable de type ref et utilisons la fonction watch pour surveiller ses modifications. Lorsque la valeur du nom change, la fonction montre nous en informera et imprimera les informations pertinentes.

2. Surveillance des modifications dans plusieurs données

Semblable à la surveillance des modifications dans une seule donnée, la surveillance des modifications dans plusieurs données est également très simple. Utilisez simplement la fonction watch dans la fonction setup et transmettez plusieurs variables comme noms de clé de son premier paramètre. Par exemple :

import { watch, ref } from 'vue'

export default {
  setup() {
    const name = ref('John')
    const age = ref(18)
    const height = ref(180)

    watch({ name, age, height }, (newValues, oldValues) => {
      console.log('Data changed', newValues, oldValues)
    })

    return {
      name,
      age,
      height
    }
  }
}

Dans le code ci-dessus, nous définissons trois variables de type ref nom, âge et taille, et utilisons la fonction watch et les transmettons en tant qu'objet pour surveiller leurs modifications. Lorsque la valeur de l'une de ces trois variables change, la fonction watch nous en informera et transmettra la nouvelle valeur et l'ancienne valeur comme paramètres de sa fonction de rappel.

2. Remarques sur la fonction montre

Bien que la fonction montre soit très pratique, nous devons également faire attention à certains détails lors de son utilisation.

1. Évitez de déclencher trop fréquemment

Étant donné que la fonction de surveillance est implémentée sur la base d'un proxy, la fonction de rappel sera déclenchée à chaque fois que les données changent fréquemment, la fonction de rappel de la fonction de surveillance sera également déclenchée en continu. , affecte donc les performances du code. Par conséquent, lorsque nous utilisons la fonction de surveillance, nous devons essayer d'éviter les changements de données trop fréquents, ou ajouter un traitement différé et d'autres opérations dans la fonction de rappel.

2. Écouter les changements dans les tableaux et les objets

Lorsque nous devons surveiller les changements dans les tableaux et les objets, parce que leur implémentation sous-jacente est différente des variables ordinaires, nous devons utiliser des méthodes spéciales fournies par Vue pour la surveillance, telles que : , immédiat etc. De cette façon, nous pouvons obtenir correctement les changements dans les tableaux et les objets.

3. Utilisez la fonction watchEffect pour remplacer la fonction montre

En plus de la fonction montre, Vue3 fournit également une nouvelle fonction watchEffect, qui peut surveiller plus facilement les changements dans les données réactives et effectuer automatiquement les opérations correspondantes. Si nous voulons simplement surveiller les changements dans les données réactives, il est recommandé d'utiliser la fonction watchEffect.

Cet article présente principalement l'utilisation de base et les précautions de la fonction montre dans Vue3. J'espère qu'il sera utile à tout le monde. Lors de l'utilisation des fonctions de surveillance, nous devons suivre de bonnes pratiques de codage et essayer d'éviter une utilisation excessive des fonctions de surveillance et le déclenchement fréquent de fonctions de rappel. Si vous devez surveiller les modifications apportées aux tableaux et aux objets, vous devez utiliser les méthodes spéciales fournies par Vue. Dans le même temps, nous pouvons également utiliser la fonction watchEffect pour surveiller plus facilement les modifications des données réactives.

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!