La fonction watchEffect dans Vue3 : vous permet de jouer avec la réactivité de Vue3 en 10 minutes

La fonction watchEffect dans Vue3 : vous permet de jouer avec la réactivité de Vue3 en 10 minutes

Vue3 est un framework Vue.js récemment publié. Il est largement considéré comme la dernière évolution du framework Vue.js, offrant de nouvelles fonctionnalités et optimisations. dont le plus avant-gardiste est son puissant système réactif. Le système réactif de

Vue3 a été amélioré à bien des égards, l'une des améliorations importantes est l'introduction de la fonction watchEffect. La fonction watchEffect est l'un des cœurs de Vue3, qui vous permet d'utiliser les données réactives et le traitement plus facilement. Dans cet article, nous présenterons l'utilisation de base de la fonction watchEffect et comment l'utiliser pour améliorer les fonctionnalités de Vue3.

Qu'est-ce que la fonction watchEffect ?

La fonction watchEffect est un système réactif basé sur le suivi des dépendances dans Vue3, plutôt que la fonction de surveillance déclarative dans Vue.js traditionnel. La fonction watchEffect peut suivre automatiquement les données dépendantes et appeler automatiquement la fonction de rappel lorsque les données dépendantes changent.

Les caractéristiques de la fonction watchEffect sont : lorsque les données changent, l'interface utilisateur sera immédiatement mise à jour ; lorsque les données dépendantes changent, le rappel précédent peut être automatiquement nettoyé et les données dépendantes seront déconnectées. Cela signifie que nous pouvons créer et nettoyer des fonctionnalités réactives une fois que nous en avons besoin, plutôt que d'ajouter du code inutile car nous devons nettoyer les rappels précédents.

Comment utiliser la fonction watchEffect ?

Utiliser la fonction watchEffect dans Vue3 est très simple, il vous suffit de l'appeler dans la fonction de configuration. Voici un exemple simple pour nous permettre de mieux comprendre comment l'utiliser :

<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
import { reactive, watchEffect } from 'vue';

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

    watchEffect(() => {
      console.log(`count changed to ${state.count}`);
    });

    const increment = () => {
      state.count++;
    };

    return {
      ...state,
      increment,
    };
  },
};
</script>

Dans cet exemple, nous utilisons la fonction réactive pour créer un état d'objet de données réactif, puis enregistrons une fonction de rappel via la fonction watchEffect. La fonction sera appelée lorsque state.count changera.

Lorsque nous ajoutons un bouton, la fonction d'incrémentation est déclenchée et la valeur de state.count changera également. La fonction watchEffect écoutera automatiquement ce changement et imprimera « compte modifié à XX » dans la console.

Comme mentionné ci-dessus, puisque les fonctions watchEffect reposent sur des données réactives, elles seront appelées dès que les données réactives enverront des modifications.

Avantages de l'utilisation de la fonction watchEffect

1. Pas d'écouteur d'affichage

En utilisant la fonction watchEffect, nous n'avons pas besoin d'appeler explicitement l'écouteur de montre pour surveiller les changements de données. Au contraire, la fonction watchEffect suit automatiquement les dépendances et enregistre les fonctions avec des dépendances pour garantir la cohérence des données.

2. Meilleures performances

Étant donné que la fonction watchEffect est basée sur le suivi des dépendances, elle peut mieux optimiser les performances. Il nettoie automatiquement le rappel précédent et désenregistre les données dépendantes afin que nous puissions créer et nettoyer les fonctionnalités réactives en une seule fois si nécessaire.

3. Code plus simple

Le système réactif de Vue3 adopte des idées de programmation plus fonctionnelles, et il en va de même pour la fonction watchEffect. Lorsque les données réactives changent, nous pouvons écrire un simple rappel pour les gérer sans écrire beaucoup de code répétitif.

Résumé

Comme mentionné ci-dessus, la fonction watchEffect est une fonctionnalité puissante de Vue3, permettant aux développeurs d'utiliser des données et un traitement réactifs plus facilement et plus efficacement. Son utilisation peut réduire efficacement la quantité de code que nous écrivons et optimiser les performances de notre code.

Lorsque vous commencez à utiliser Vue3, assurez-vous d'apprendre à utiliser et à comprendre la fonction watchEffect pour profiter pleinement du système réactif de Vue3.

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!