Comment utiliser watchEffect dans Vue pour surveiller les données réactives et mettre à jour le DOM

En tant que framework front-end, l'un des cœurs de Vue réside dans les vues basées sur les données. Lorsque les données définies dans Vue changent, la vue correspondante est également mise à jour. Dans Vue3, afin d'optimiser les performances et la vitesse de réponse, le système de réactivité et l'API Composition sont introduits. Dans le cadre d'un système réactif, watchEffect peut surveiller les modifications des données et mettre à jour le DOM instantanément. Cet article présentera en détail comment utiliser watchEffect dans Vue pour surveiller les données réactives et mettre à jour le DOM.

1. Système réactif

Dans Vue3, le cœur du système réactif est constitué d'objets JavaScript ordinaires appelés « Objets réactifs ». En utilisant la fonction réactive pour convertir un objet en objet réactif, Vue peut suivre et répondre aux modifications des données dans cet objet.

Les principales API utilisées dans les systèmes réactifs sont :

1. reactive : Convertit un objet JavaScript ordinaire en un objet réactif.
2. ref : Convertissez un objet JavaScript ordinaire en un objet responsive, et ajoutez l'attribut .value à l'objet Vous pouvez accéder directement à la valeur de l'objet et modifier sa valeur. Lorsque vous l'utilisez dans un modèle, vous devez utiliser .value pour fonctionner.
3. toRefs : convertissez un objet réactif en un objet JavaScript normal, où chaque propriété est encapsulée en tant qu'objet de référence.
4. calculé : définissez une propriété calculée et la valeur de retour est un objet réactif. Lorsque la dépendance du processus de calcul sur l'objet réactif change, la fonction calculée sera automatiquement recalculée et mise à jour.

2. watchEffect

watchEffect est une nouvelle API dans Vue3. Elle peut automatiquement déduire les dépendances qui doivent être surveillées en fonction de l'objet réactif. Une fois les données dépendantes modifiées, la fonction de rappel dans watchEffect sera immédiatement déclenchée. L'utilisation de watchEffect est similaire à celle calculée, mais watchEffect n'a pas besoin d'accéder aux propriétés, il lui suffit d'utiliser l'objet réactif directement dans la fonction de rappel.

watchEffect a les caractéristiques suivantes :

1. watchEffect est exécuté avant la mise à jour du Dom, il peut donc être utilisé directement après la mise à jour des données dans cette fonction.
2. watchEffect peut suivre automatiquement les modifications des données réactives sans spécifier manuellement les dépendances.
3. watchEffect doit renvoyer une fonction de nettoyage sans paramètre. Lorsque les dépendances associées de watchEffect changent et sont réexécutées, la fonction de nettoyage sera automatiquement appelée pour libérer des ressources.

Les points à noter lors de l'utilisation de watchEffect sont :

1. N'effectuez pas d'opérations trop longues dans watchEffect car elles seront effectuées à chaque fois que les données sont mises à jour.
2. Si vous avez besoin de surveiller avec précision les modifications de certaines données, vous devez également utiliser la fonction watch ou les paramètres dépendants de watchEffect pour le spécifier.

3. Utilisez watchEffect pour mettre à jour le DOM

Nous pouvons utiliser la fonction watchEffect dans le composant de fichier unique de Vue pour mettre à jour la structure du DOM dans la fonction de rappel. De cette façon, chaque fois que les données réactives du composant changent, nous pouvons immédiatement voir le résultat changer.

Ci-dessous, nous prenons un compteur comme exemple pour démontrer l'utilisation de la fonction watchEffect :

<!-- Counter.vue -->
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>
<script>
import { reactive, watchEffect } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0
    })

    watchEffect(() => {
      document.title = `计数器：${state.count}`
    })

    function increment() {
      state.count++
    }

    return {
      count: state.count,
      increment
    }
  }
}
</script>

Dans cet exemple, nous définissons un état d'objet réactif et utilisons la fonction watchEffect pour surveiller ses changements. Lorsque l'attribut count change, le code de la fonction de rappel watchEffect est automatiquement exécuté et le titre de l'onglet du navigateur est mis à jour.

En plus de mettre à jour le titre du navigateur, nous pouvons implémenter davantage d'opérations de liaison de données via la fonction watchEffect, telles que la liaison de classe et de style, l'interpolation de texte et d'autres opérations. Grâce à ces méthodes, nous pouvons contrôler de manière flexible l'affichage et le masquage des composants, l'ajustement du style, etc.

4. Résumé

Dans Vue3, watchEffect est un outil très pratique qui permet de mettre à jour le DOM très rapidement lorsque les données changent. Lorsque vous utilisez la fonction watchEffect, vous devez faire attention aux objets qu'elle écoute et au code de la fonction de rappel pour garantir les performances et la qualité du code. En plus de watchEffect, Vue3 fournit également des fonctions et des API de composition plus réactives, qui peuvent être utilisées en combinaison pour répondre à différents besoins.

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!