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

Points clés à retenir

• Les frameworks JavaScript comme Vue offrent des fonctionnalités telles que l'architecture des composants, la gestion des états et le routage pour simplifier le développement d'applications Web.
• Les Vue Watchers sont des fonctions qui surveillent les changements dans les propriétés réactives et vous permettent de réagir aux événements et aux modifications des données.
• En comparant les observateurs avec les propriétés calculées, les propriétés calculées sont plus concises et plus faciles à lire, ce qui entraîne de meilleures performances et un meilleur débogage.

Les frameworks JavaScript sont devenus un élément essentiel du développement Web. Cela est dû à leurs fonctionnalités facilement accessibles, notamment l'architecture des composants, la gestion des états et le routage. Ceux-ci contribuent à réduire le stress, les efforts et le temps nécessaires pour créer une application Web à partir de zéro.

Vue, l'un de ces frameworks, propose de nombreuses fonctionnalités pour accélérer le développement. La fonction de surveillance vous permet de surveiller les valeurs des variables et des expressions pendant l'exécution du programme.

Que sont les observateurs dans Vue?

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

Pour utiliser un observateur, importez le montre fonction à partir du vue package dans votre script :

<scriptsetup>
import { watch } from 'vue';
script>

Vous pouvez maintenant utiliser la fonction watch pour implémenter un observateur dans votre composant Vue. Voici un exemple simple :

<template>
<div>
<p>{{ user }}p>
<button @click="changeName">Change Namebutton>
div>
template>
<scriptsetup>
import { ref, watch } from 'vue';
const user = ref('Chinedu');
const changeName = () => {
 user.value = 'Victor'; // Change the user's name
};
watch(user, (newUser, oldUser) => {
 alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
script>

Ce composant simple utilise la fonction de surveillance pour surveiller le changement de nom d'un utilisateur. La section modèle de l'extrait définit la structure HTML du composant, qui comprend un p balise qui affiche la valeur de la variable réactive utilisateur.

Le modèle contient également un élément bouton, avec un changer de nom fonction attaché à un écouteur d'événement click. Lorsque la variable utilisateur change, Vue déclenche la fonction de rappel. La fonction de rappel affiche une alerte: « Nom d'utilisateur modifié de « Chinedu » à « Victor ».

Comparaison des observateurs avec les propriétés calculées

Il est important de comprendre la différence entre les observateurs et les propriétés calculées. Bien qu'ils soient tous deux utilisés comme outils de réactivité dans Vue, vous devez les utiliser à des fins différentes.

Par exemple, vous pouvez calculer la somme de l'âge d'un père et de son fils avec des observateurs, comme ceci :

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
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 observateurs pour obtenir la somme des âges du père et du fils. Pour ce faire, il crée une nouvelle variable réactive, total. Vous pouvez créer un variable réactive lorsque vous utilisez l'API de composition de Vue.

L'extrait emploie ensuite deux montre fonctions pour surveiller l'âge du fils et du père. Pour chaque âge, père ou fils, l'extrait résume la nouvelle valeur avec l'âge de l'autre. Il enregistre ensuite le résultat dans le total variable réactive.

Considérez le même scénario dans l'extrait ci-dessus avec celui qui utilise des propriétés calculées :

<template>
<inputtype="text"placeholder="Father's Age"v-model="father">
<inputtype="text"placeholder="Son's Age"v-model="son">
<p>Total Age: {{ total }}p>
template>
<scriptsetup>
import { ref, computed } from 'vue';
const father = ref();
const son = ref();
const total = computed(() => {
 return Number(father.value) + Number(son.value);
});
script>

Cet extrait, comparé au précédent, est plus concis et plus facile à lire. L'extrait obtient la somme de l'âge du père et du fils et l'enregistre dans une référence calculée (variable), total. La section modèle affiche ensuite la variable totale en utilisant l'interpolation, une technique de liaison de données dans Vue.

Même si vous pouvez obtenir le total des deux âges avec les observateurs, il est préférable de le faire avec les propriétés calculées. L'utilisation d'observateurs dans cette situation peut entraîner des temps de chargement plus lents et un débogage plus difficile simplement parce que cela implique plus de code.

N'utilisez pas d'observateurs pour remplacer les propriétés calculées. Utilisez des observateurs pour surveiller et réagir aux modifications des données, ainsi qu'aux propriétés calculées lorsque vous souhaitez dériver de nouvelles données à partir de données réactives existantes.

Le immédiat L'option est une configuration que vous pouvez utiliser lors de la création d'un observateur. Cette option détermine si l'observateur doit déclencher son rappel immédiatement après que Vue ait monté le composant.

Voici un exemple de composant utilisant un observateur avec l'option immédiate :

<scriptsetup>
import { ref, watch } from 'vue';
const count = ref(10);
watch(
 count,
 (newCount, oldCount) => {
 console.log(`Count changed from ${oldCount} to ${newCount}`);
 },
 { immediate: true }
);
script>

Dans l'extrait ci-dessus, l'observateur exécutera son rappel immédiatement après l'initialisation du composant et enregistrera « Le nombre est passé de non défini à 10 » sur la console. Cela montre que la variable initiale n'était pas définie avant que Vue n'injecte la valeur de 10 dans le compte réf.

L'option immédiate peut être pratique dans les scénarios dans lesquels 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 à partir d'une API une fois que Vue monte un composant.

L'option Deep disponible dans Vue Watchers

Le profond L'option disponible lorsque vous travaillez avec des observateurs dans Vue permet une observation approfondie des changements dans les objets ou les tableaux imbriqués. Lorsqu'il est réglé sur vrai, l'observateur peut détecter les changements dans les propriétés imbriquées.

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

<scriptsetup>
import { ref, watch } from 'vue';
const data = ref({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 },
 { deep: true }
);
// This will trigger the watcher because it's a deep change
data.value.length = 43;
script>

L'extrait ci-dessus initialise le données ref avec un objet contenant un longueur propriété. L'extrait définit l'option profonde sur vrai. Il enregistre ensuite sur la console que les données ont changé depuis que la propriété length est devenue 43.

Sans l'option profonde définie sur true, la fonction de surveillance ne remarquera aucune modification de l'objet. Cependant, Vue suit toutes les modifications imbriquées et profondes sans l'option profonde lorsque vous initialisez la variable de données en tant qu'objet réactif :

<scriptsetup>
import { ref, watch } from 'vue';
const data = reactive({ length: 42 });
watch(
 data,
 (newData, oldData) => {
 console.log(`Data changed"`);
 }
);
// This will trigger the watcher because it changes a reactive object
data.length = 43;
script>

La fonction de surveillance dans l'extrait ci-dessus enregistrera sur la console que les données ont changé car la variable de données est un objet réactif.

Créez de meilleures applications avec Vue Watchers

Les observateurs 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 observateurs, leurs différences par rapport aux propriétés calculées et des options telles que immédiate et profonde peut améliorer considérablement votre capacité à créer des applications Vue très réactives.