Apprendre Vue.js : Propriétés calculées

Summary

Dans ce chapitre, l'auteur présente les propriétés dérivées dans Vue.js, en expliquant leur utilité pour optimiser les performances. L'exemple utilisé est celui d'un système de gestion de tâches, où une fonction est réexécutée à chaque changement, même si la liste des tâches n'a pas évolué. En utilisant des propriétés `computed`, Vue.js optimise automatiquement les calculs, évitant des recalculs inutiles. L'auteur montre aussi comment créer des compteurs dynamiques pour les tâches restantes, tout en soulignant l'importance de ne pas muter directement les données. Enfin, il aborde les `computed` properties écrivables et l'usage des Watchers comme alternatives.

Takeaways

• 😀 Les propriétés dérivées dans Vue.js optimisent les performances en évitant les recalculs inutiles.
• 😀 Les fonctions sont réexécutées à chaque changement de propriété, ce qui peut être inefficace si la donnée n'a pas changé.
• 😀 Utiliser `computed` permet de ne recalculer une valeur que lorsque ses dépendances changent, ce qui améliore les performances.
• 😀 `computed` détecte automatiquement les dépendances utilisées dans le calcul, comme les listes et les cases à cocher.
• 😀 En accédant à une propriété `computed`, Vue.js évite de recalculer la valeur à chaque fois qu'on y accède, sauf si une dépendance a changé.
• 😀 Si une propriété `computed` dépend d'un changement dynamique (par exemple, la case à cocher d'une tâche), Vue.js met à jour la valeur automatiquement.
• 😀 L'utilisation de `computed` au lieu de méthodes évite les recalculs systématiques et rend l'application plus réactive.
• 😀 Il est préférable d'utiliser `computed` pour les valeurs dérivées d'autres données dynamiques plutôt que des fonctions classiques.
• 😀 L'utilisation de `computed` permet de mieux gérer les affichages conditionnels, comme le nombre de tâches à faire.
• 😀 Il est déconseillé d'utiliser des propriétés `computed` pour effectuer des mutations de données. Préférez les méthodes pour modifier les données.
• 😀 Les propriétés `computed` doivent éviter les effets de bord, ce qui signifie ne pas muter directement les données utilisées pour le calcul.

Q & A

Qu'est-ce qu'une propriété dérivée dans Vue.js et pourquoi est-elle utile ?

Une propriété dérivée dans Vue.js est une valeur calculée qui dépend d'autres variables dynamiques. Elle est utile car elle permet de recalculer automatiquement la valeur uniquement lorsque l'une des variables dont elle dépend change, ce qui optimise les performances en évitant des recalculs inutiles.

Pourquoi l'utilisation d'une fonction pour organiser les tâches dans le premier exemple est-elle problématique ?

L'utilisation d'une fonction pour organiser les tâches est problématique car la fonction est réexécutée à chaque fois qu'une propriété change dans Vue.js, même si la liste des tâches ne change pas. Cela entraîne des calculs inutiles et réduit les performances.

Comment Vue.js détecte-t-il les changements dans les propriétés dérivées ?

Vue.js détecte les changements dans les propriétés dérivées en surveillant les dépendances utilisées dans la fonction. Lorsqu'une de ces dépendances change (comme une tâche ou la case à cocher pour les tâches complètes), Vue.js déclenche automatiquement la mise à jour de la propriété dérivée.

Quel est l'avantage d'utiliser une propriété computed plutôt qu'une fonction pour dériver des valeurs ?

L'avantage d'utiliser une propriété computed est que Vue.js optimise le calcul en ne réévaluant la valeur que lorsque ses dépendances changent. Cela évite de recalculer la valeur à chaque fois que la propriété est appelée, améliorant ainsi les performances.

Que se passe-t-il lorsque l'on accède plusieurs fois à une propriété dérivée dans Vue.js ?

Lorsque l'on accède plusieurs fois à une propriété dérivée, Vue.js ne réexécute pas la fonction de calcul à chaque appel. Il utilise la valeur calculée en mémoire, ce qui évite des recalculs inutiles et améliore les performances.

Que fait Vue.js lorsqu'une tâche est modifiée dans l'exemple de la case à cocher ?

Lorsque la case à cocher d'une tâche est modifiée, Vue.js détecte ce changement et recalculera automatiquement les propriétés dérivées dépendantes, comme la liste des tâches organisées, pour refléter l'état actuel des données.

Quelle est la différence entre une propriété computed et une fonction dans Vue.js ?

Une propriété computed est une valeur dérivée qui est mise en cache et ne se recalculera que lorsque ses dépendances changent. En revanche, une fonction sera réexécutée à chaque appel, même si les données sur lesquelles elle se base n'ont pas changé.

Dans quel cas devrions-nous utiliser une propriété computed plutôt qu'une fonction normale ?

Une propriété computed doit être utilisée lorsque vous avez besoin de calculer une valeur basée sur d'autres données dynamiques, afin de bénéficier de l'optimisation de la mise en cache et de la réactivité fournie par Vue.js. Les fonctions doivent être utilisées lorsque le calcul ne dépend pas directement de la réactivité des données.

Pourquoi est-il déconseillé d'utiliser une propriété computed pour effectuer des mutations directes sur les données ?

Il est déconseillé de muter directement les données dans une propriété computed car cela peut provoquer des effets de bord imprévus. Les computed sont destinées à dériver des valeurs sans modifier les données sources, ce qui pourrait perturber la réactivité de Vue.js.

Quels sont les risques associés aux propriétés computed écrivables dans Vue.js ?

Les propriétés computed écrivables peuvent être risquées car elles permettent de modifier des données directement via une propriété calculée, ce qui peut entraîner des comportements imprévus et nuire à la clarté du code. Il est préférable d'utiliser des méthodes séparées pour effectuer des mutations sur les données.