Découvrez Vue.js Watchers pour améliorer le développement de votre application Web

Points Essentiels à Retenir

• Les frameworks JavaScript, à l'instar de Vue, offrent des fonctionnalités telles que l'architecture par composants, la gestion des états et le routage, simplifiant ainsi le développement d'applications web.
• Les Watchers de Vue sont des fonctions qui surveillent les changements de propriétés réactives, permettant de réagir aux événements et aux modifications des données.
• Comparés aux propriétés calculées, les watchers peuvent être plus verbeux. Les propriétés calculées, elles, sont plus concises et favorisent une meilleure lisibilité, améliorant ainsi les performances et le débogage.

Les frameworks JavaScript sont devenus incontournables dans le développement web grâce à leurs fonctionnalités accessibles, notamment l'architecture par composants, la gestion d'état et le routage. Ces éléments réduisent le temps, les efforts et le stress nécessaires pour créer une application web de A à Z.

Vue, parmi ces frameworks, propose un grand nombre de fonctionnalités qui accélèrent le développement. La fonction de surveillance (watch) permet de suivre les valeurs des variables et expressions pendant l'exécution du programme.

Qu'est-ce qu'un Watcher dans Vue ?

Les Watchers Vue sont des fonctions qui surveillent les modifications d'une propriété réactive et réagissent en conséquence. Ils permettent de réagir aux événements et aux modifications de données.

Pour utiliser un watcher, il faut importer la fonction watch du package Vue dans votre script:

 <script setup>
import { watch } from 'vue';
</script>

Vous pouvez ensuite utiliser la fonction watch pour implémenter un watcher dans votre composant Vue. Voici un exemple:

 <template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Changer le Nom</button>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
  user.value="Victor"; // Changer le nom de l'utilisateur
};
watch(user, (newUser, oldUser) => {
  alert(`Le nom d'utilisateur est passé de "${oldUser}" à "${newUser}"`);
});
</script>
 

Ce composant simple utilise la fonction watch pour surveiller le changement de nom d'un utilisateur. La section template de l'extrait définit la structure HTML du composant, qui inclut une balise p affichant la valeur de la variable réactive user.

Le template contient aussi un bouton avec une fonction changeName liée à l'écouteur d'événement click. Lorsque la variable user change, Vue déclenche la fonction de rappel, qui affiche une alerte : "Le nom d'utilisateur est passé de « Chinedu » à « Victor »."

Comparaison entre les Watchers et les Propriétés Calculées

Il est important de comprendre la différence entre les watchers et les propriétés calculées. Bien que les deux soient utilisés comme outils de réactivité dans Vue, il est crucial de les utiliser à des fins différentes.

Par exemple, on peut calculer la somme de l'âge d'un père et de son fils en utilisant des watchers, comme ceci :

 <template>
  <input type="text" placeholder="Âge du Père" v-model="father">
  <input type="text" placeholder="Âge du Fils" v-model="son">
  <p>Âge Total: {{ total }}</p>
</template>
<script setup>
import { ref, watch } from 'vue';
const father = ref();
const son = ref();
const total = ref();
watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) + Number(newAge)
})
watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) + Number(son.value)
})
</script>
 

Ce composant Vue utilise des watchers pour obtenir la somme des âges du père et du fils. Pour ce faire, il crée une nouvelle variable réactive total. La création d'une variable réactive est possible en utilisant l'API de composition de Vue.

L'extrait utilise deux fonctions watch pour surveiller l'âge du fils et du père. Pour chaque âge, père ou fils, il additionne la nouvelle valeur avec l'âge de l'autre. Le résultat est ensuite stocké dans la variable réactive total.

Considérons le même scénario avec les propriétés calculées :

 <template>
  <input type="text" placeholder="Âge du Père" v-model="father">
  <input type="text" placeholder="Âge du Fils" v-model="son">
  <p>Âge Total: {{ total }}</p>
</template>
<script setup>
import { ref , computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
  return Number(father.value) + Number(son.value);
});
</script>
 

Cet extrait est plus concis et plus facile à lire que le précédent. Il obtient la somme de l'âge du père et du fils, et stocke le résultat dans une référence (variable) calculée total. La section template affiche ensuite la variable total à l'aide de l'interpolation, une technique de liaison de données dans Vue.

Même s'il est possible de calculer la somme des deux âges avec les watchers, il est préférable d'utiliser les propriétés calculées. L'utilisation de watchers dans ce cas peut entraîner des temps de chargement plus lents et un débogage plus difficile, car elle implique plus de code.

N'utilisez pas les watchers à la place des propriétés calculées. Utilisez les watchers pour surveiller et réagir aux modifications de données, et les propriétés calculées lorsque vous voulez dériver de nouvelles données à partir de données réactives existantes.

L'option immediate est une configuration que vous pouvez utiliser lors de la création d'un watcher. Cette option détermine si le watcher doit déclencher sa fonction de rappel immédiatement après que Vue a monté le composant.

Voici un exemple de composant utilisant un watcher avec l'option immediate :

 <script setup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
  count,
  (newCount, oldCount) => {
    console.log(`Le compteur est passé de ${oldCount} à ${newCount}`);
  },
  { immediate: true }
);
</script>
 

Dans cet extrait, le watcher exécutera sa fonction de rappel immédiatement après l'initialisation du composant et affichera "Le compteur est passé de undefined à 10" dans la console. Cela montre que la variable initiale n'était pas définie avant que Vue n'injecte la valeur de 10 dans la référence count.

L'option immediate peut être pratique dans les situations où vous souhaitez effectuer une action initiale ou une initialisation basée sur la valeur actuelle de la propriété surveillée. Par exemple, lorsque vous avez besoin que votre application récupère des données depuis une API une fois que Vue a monté un composant.

L'Option Deep Disponible dans les Watchers Vue

L'option deep disponible lors de l'utilisation de watchers dans Vue permet une surveillance approfondie des changements au sein d'objets ou de tableaux imbriqués. Lorsqu'elle est définie sur true, le watcher peut détecter les modifications dans les propriétés imbriquées.

Voici un exemple de composant Vue avec l'option deep :

 <script setup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Les données ont changé`);
  },
  { deep: true }
);
// Ceci va déclencher le watcher car il s'agit d'un changement profond
data.value.length = 43;
</script>
 

L'extrait ci-dessus initialise la référence data avec un objet contenant une propriété length. L'extrait définit l'option deep sur true. Il affiche ensuite dans la console que les données ont changé car la propriété length est passée à 43.

Sans l'option deep définie sur true, la fonction de surveillance ne remarquerait aucun changement dans l'objet. Cependant, Vue suit toutes les modifications imbriquées et profondes sans l'option deep lorsque vous initialisez la variable data comme un objet réactif :

 <script setup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
  data,
  (newData, oldData) => {
    console.log(`Les données ont changé`);
  }
);
// Ceci va déclencher le watcher car il modifie un objet réactif
data.length = 43;
</script>
 

La fonction watch dans l'extrait ci-dessus affichera dans la console que les données ont changé car la variable data est un objet réactif.

Créez de Meilleures Applications avec les Watchers Vue

Les watchers de Vue peuvent vous aider à obtenir une réactivité fine dans vos applications. Ils contrôlent la manière dont vous pouvez observer les modifications des propriétés des données et exécuter une logique personnalisée en réponse.

Comprendre quand utiliser les watchers, leurs différences par rapport aux propriétés calculées et des options telles que immediate et deep peut améliorer considérablement votre capacité à créer des applications Vue hautement réactives.