![Comprendre watch et watchEffect avec Vue 3](/_astro/watch-vue.C6aF75Po_YK0KA.webp)
Comprendre watch et watchEffect avec Vue 3
Sommaire
- Introduction
- Utilisation de ref et watchEffect
- Gestion des effets secondaires avec
onInvalidate
- Des fonctions paresseuses ?
- Conclusion
Introduction
L’API Composition nous offre 2 fonctions pour gérer nos side effects : watch
et watchEffect
.
Tout comme ref
et reactive
, ces méthodes ne sont pas destinées à se concurrencer, mais à être utilisées selon les besoins de l’application. Considérez-les comme 2 outils similaires, chacun étant utile dans certaines situations.
- Surveiller les changements de variable réactive
- Permettre au développeur d’effectuer des side effects
- Annuler un side effect
Cependant, il existe un certain nombre de différences entre elles. En voici une liste non exhaustive :
watch
est utilisé pour déclencher des side effects en mode “lazy” (tandis quewatchEffect
est toujours immédiat)watchEffect
surveille automatiquement les changements de code en définissant lui-même les dépendanceswatch
fournit un accès aux valeurs actuelles et précédentes
Il est important de tenir compte de ce que vous souhaitez réaliser et d’utiliser l’outil approprié pour la tâche.
Utilisation de ref et watchEffect
Contexte actuel : l’utilisateur doit pouvoir éditer en temps réel un article.
Nous utilisons ref
pour définir la variable réactive content
. Pour accéder à la valeur réelle, nous utilisons content.value
car il s’agit d’une référence à la valeur, et non de la valeur elle-même. Ensuite, nous retournons un objet avec content
pour qu’il soit disponible dans le template. Il en va de même pour isPublic
.
Avec watchEffect
, nous fournissons une fonction anonyme en tant qu’argument, ce qui va permettre de sauvegarder l’article en cours d’édition. Remarquez que nous n’avons pas besoin de spécifier ni content
ni isPublic
en tant que valeur à surveiller, en effet watchEffect
est capable de surveiller automatiquement toutes les variables réactives référencées à l’intérieur de son callback.
<template>
<h2>Article en cours d'édition</h2>
<textarea v-model="content" />
<label>
Est-ce public ?
<input type="checkbox" v-model="isPublic" />
</label>
</template>
<script setup lang="ts">
import { watchEffect, ref } from "vue";
import { save } from "./myComposable";
const content = ref('');
const isPublic = ref(false);
watchEffect(async () => await save(content.value, isPublic.value));
</script>
On se watch plus tard ?
L’une des fonctionnalités de l’API Composition est la possibilité de supprimer les watchers de manière programmatique.
Imaginons que notre utilisateur ait terminé de modifier son article et souhaite arrêter de soumettre les modifications côté backend. À la fois watch
et watchEffect
renvoient une fonction qui peut être appelée pour cesser de surveiller les changements.
Cela peut aider à organiser votre code et communiquer clairement aux autres développeurs qu’un watcher n’est plus nécessaire à un moment précis.
<template>
<h2>Article en cours d'édition</h2>
<textarea v-model="content" />
<label>
Est-ce public ?
<input type="checkbox" v-model="isPublic" />
</label>
<button @click="stopEditing">Travail terminé !</button>
</template>
<script setup lang="ts">
import { watchEffect, ref } from "vue";
import { save } from "./myComposable";
const content = ref('');
const isPublic = ref(false);
const stopWatching = watchEffect(async () => await save(content.value, isPublic.value));
const stopEditing = () => stopWatching();
</script>
Désactivation et invalidation des side effects
Une autre fonctionnalité, et pas des moindres, est la possibilité d’invalider nos effets secondaires.
Dans notre exemple, que se passe-t-il si l’utilisateur entre davantage de texte après l’appel de la fonction save
?
En utilisant l’invalidation intégrée, nous pouvons détecter quand quelque chose a changé dans notre état et annuler notre requête API en cours.
Examinons à quoi cela ressemblerait :
<template>
<h2>Article en cours d'édition</h2>
<textarea v-model="content" />
<label>
Est-ce public ?
<input type="checkbox" v-model="isPublic" />
</label>
<button @click="stopEditing">Travail terminé !</button>
</template>
<script setup lang="ts">
import { watchEffect, ref } from "vue";
import { save } from "./myComposable";
const content = ref('');
const isPublic = ref(false);
const stopWatching = watchEffect(async (onInvalidate) => {
const abort = await save(content.value, isPublic.value);
onInvalidate(() => abort());
});
const stopEditing = () => stopWatching();
</script>
Gestion des effets secondaires avec onInvalidate
Le callback que nous avons passé à watchEffect
a maintenant un argument onInvalidate
. Cette fonction prend un autre callback en tant qu’argument, qui est appelé lorsque l’état surveillé a changé.
Dans notre exemple, la fonction save
renvoie maintenant une fonction que nous appelons abort
qui peut être utilisée pour interrompre la requête API.
Lorsque onInvalidate
est déclenché, nous appelons abort
ce qui annule la requête API en cours car nous savons à ce moment qu’une prochaine requête API est déclenchée dans un prochain appel de watch
.
Des fonctions paresseuses ?
Il est fondamental de noter que watchEffect
se déclenche immédiatement tout en suivant réactivement ses dépendances et la réexécute chaque fois que les dépendances changent.
Cela signifie que dès le chargement de la page, notre effet secondaire est déclenché et les données sont envoyées à notre API. Gardez cela à l’esprit ! Vous ne voulez peut-être pas sauvegarder un champ de texte vide initialement.
Si vous avez besoin de déclencher des effets de manière “lazy”, utilisez la méthode watch
à la place.
Inversemment pour la méthode watch
, qui est initialement “lazy”, si vous désirez qu’elle se déclenche immédiatement, vous pouvez lui passer l’option immediate: true
.
watch(source, (newValue, oldValue) => {
// executé desuite, puis lorsque la source change
}, { immediate: true })
Conclusion
Dans cet article, nous avons exploré l’utilisation de watch
et watchEffect
avec l’API Composition de Vue 3 pour gérer les effets secondaires dans nos applications. Nous avons constaté que ces deux méthodes offrent une flexibilité précieuse pour réagir aux changements d’état et effectuer des opérations en conséquence.
L’utilisation de watch
et watchEffect
nous permet de surveiller les variables réactives et de déclencher du code en conséquence. La capacité de désactiver les watchers de manière programmatique, ainsi que celle d’invalider les effets secondaires, offre un niveau de contrôle supplémentaire sur la gestion des réactions aux changements d’état.
Lorsque vous choisissez entre watch
et watchEffect
, gardez à l’esprit les différences essentielles entre les deux, notamment le moment où ils sont déclenchés et la manière dont ils gèrent les dépendances. En fonction de vos besoins spécifiques, vous pouvez choisir la méthode qui convient le mieux à votre cas d’utilisation.
Plus globalement, n’oubliez pas que dans notre métier, une seule arme ne suffit pas toujours. Il est essentiel de savoir comment l’utiliser judicieusement au bon moment, et d’être curieux pour élargir notre arsenal en conséquence !