Formation Vue 3 | Observer le State avec les Computed et Watchers

Computed

Comprendre les computed

Considérons l’état suivant :

data() {
	return {
		firstname: 'Dave',
		lastname: 'Webb',
		languages: ['HTML', 'CSS', 'PHP', 'JS', 'Python']
	}
}

Ainsi que l’affichage suivant :

<p>{{ firstname }} {{ lastname }} {{ languages.length >= 5 ? "est confirmé" : "est encore en apprentissage" }}.</p>

Ici, le template se complexifie et n’est plus uniquement déclaratif puisqu’il conditionne l’affichage selon ce que renvoie languages.length.

Désormais, imaginez que nous souhaitons intégrer cette condition plus d’une fois sur la page : notre template deviendrait brouillon.

Une solution serait donc de factoriser cette logique dans une méthode dédiée.

data() {
	return {
		firstname: 'Dave',
		lastname: 'Webb',
		languages: ['HTML', 'CSS', 'PHP', 'JS', 'Python']
	}
},
methods: {
	learningStatus() {
		return this.languages.length >= 5 ? "est confirmé" : "est encore en apprentissage";
	}
}

<p>{{ firstname }} {{ lastname }} {{ learningStatus() }}.</p>

Désormais, la logique étant factorisée au sein d’une méthode dédiée, son exploitation multiple depuis nos templates est propre.

En revanche, le test conditionnel serait bien effectué autant de fois que la méthode est appelée. Ce qui n’est, en termes de performance, pas idéal vous en conviendrez.

Pour pallier cela, on utilise des méthodes un peu particulières nommées « computed » (propriété calculée).

Les propriétés calculées sont basées sur d’autres propriétés réactives de l’état de l’application Vue.js. Elles sont mises à jour automatiquement et en temps réel lorsque les propriétés dont elles dépendent sont modifiées.

Elles permettent ainsi de calculer et renvoyer une valeur basée sur une ou plusieurs propriétés réactives et sont ainsi souvent utilisées pour simplifier la logique du code, optimiser le traitement et éviter la répétition de calculs.

Déclaration

Une propriété calculée se déclare en tant que fonction appartenant à un objet computed :

data() {
	return {
		firstname: 'Dave',
		lastname: 'Webb',
		languages: ['HTML', 'CSS', 'PHP', 'JS', 'Python']
	}
},
computed: {
	learningStatus() {
		return this.languages.length >= 5 ? "est confirmé" : "est encore en apprentissage";
	}
}

Exploitation

Pour appeler une propriété calculée, on procède comme pour une fonction, en omettant les parenthèses finales.

<p>{{ firstname }} {{ lastname }} {{ learningStatus }}.</p>

Fonctionnement : La première exécution de la propriété computed learningStatus va créer un cache, qu’il y ait ou pas la présence de donnée réactive.

Au prochain rendu (appel de la fonction computed) :

• S’il ne trouve aucune donnée réactive (dépendance), il renverra toujours le même résultat, mis en cache précédemment.
• S’il voit qu’aucune donnée réactive utilisée n’a changé, il la récupère dans le cache.
• Sinon, si une donnée réactive utilisée a changé, il ré-exécute le computed pour créer un nouveau résultat aussitôt remis en cache.

Voici un tableau récapitulatif résumant l’intérêt des propriétés calculées :

Watchers

Comprendre les watchers

Si les computed permettent de calculer des valeurs dérivées en réaction à des changements d’état, il est parfois utile de réagir à ces changements d’état pour déclencher des actions. On parle d’ « effets de bord ».

Un « watcher » (ou « observateur » en français) dans Vue.js est une fonctionnalité qui permet de surveiller les changements sur une propriété réactive et d’exécuter du code (via des fonctions) en réponse à des changements de données.

Les watchers sont utiles pour effectuer des opérations telles que :

• La validation des entrées utilisateur
• L’envoi de requêtes HTTP
• La mise à jour d’autres propriétés de données
• La mise à jour de l’interface utilisateur en fonction des changements de données
• Etc.

Observation

data() {
	return {
		count: 0
	}
},
watch: {
	count(newValue, oldValue) {
		console.log(`From ${oldValue} to ${newValue}`);
	}
}

Dans cet exemple, nous avons défini une fonction de surveillance (watcher) qui affiche dans la console un message à chaque fois que la propriété count change.

En résumé, les watchers sont utilisés pour exécuter des fonctions en réponse à des changements de propriétés, tandis que les propriétés computed sont utilisées pour calculer des valeurs en fonction d’autres propriétés réactives.