Comment utiliser $watchEffect dans Vue pour collecter automatiquement les dépendances

Dans Vue, $watchEffect est une API permettant de surveiller les modifications de données réactives et peut collecter automatiquement les dépendances sans spécifier manuellement les données à surveiller. Dans Vue 3, $watchEffect remplace la méthode $watch dans Vue 2 et devient une méthode de surveillance des données réactive plus pratique et plus efficace. Ce qui suit explique comment utiliser $watchEffect dans Vue pour collecter automatiquement les dépendances.

1. Créer une instance Vue

Tout d'abord, nous devons créer une instance Vue. Il peut être créé via la méthode Vue.createApp(). Cette méthode renvoie une instance d'application app.

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

2. Utilisez $watchEffect pour surveiller les modifications des données

Ensuite, nous utilisons $watchEffect pour surveiller les modifications du nombre de données. Lorsque la valeur de count change, $watchEffect exécutera automatiquement les fonctions d'effets secondaires pertinentes et collectera les dépendances.

app.mount('#app')

app.config.globalProperties.$watchEffect(() => {
  console.log('count is', app._data.count)
})

Ici, nous utilisons la fonction d'effet secondaire pour imprimer simplement la valeur du décompte actuel. Dans les applications de projet réelles, les fonctions d'effets secondaires peuvent effectuer des opérations plus complexes, telles que la mise à jour des nœuds DOM, etc. $watchEffect collectera automatiquement toutes les propriétés réactives dans l'instance Vue (y compris les propriétés calculées, les méthodes, etc.) et exécutera automatiquement les fonctions d'effets secondaires lorsque ces données de propriété changent. De cette façon, nous n’avons pas besoin de spécifier manuellement les données à écouter, ni de gérer manuellement la collecte des dépendances.

3. Modifier les données réactives

Enfin, nous pouvons essayer de modifier la valeur de count pour voir si $watchEffect peut fonctionner correctement.

setTimeout(() => {
  app._data.count += 1
}, 1000)

La fonction setTimeout est utilisée pour retarder une période de temps afin de simuler l'effet des modifications de données. Lorsque la valeur du nombre change, $watchEffect exécutera automatiquement la fonction d'effet secondaire et imprimera la nouvelle valeur du nombre.

Grâce à cet exemple simple, nous pouvons voir que $watchEffect peut nous aider à collecter automatiquement les dépendances et à exécuter les fonctions d'effets secondaires associées lorsque les données changent, évitant ainsi les problèmes de gestion manuelle des dépendances. Dans les projets réels, $watchEffect est une API de surveillance des données réactive très pratique, qui peut considérablement améliorer l'efficacité du développement et réduire la probabilité d'erreurs.

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!