Propriétés calculéesPour modifier une valeur dynamiquement, pour des raison de performances, il convient d'utiliser des propriétés calculées (computed properties) plutôt que des méthodes.
C'est à dire que si une valeur doit être recalculée en fonction d'une ou plusieurs autres valeurs, il est préférable d'utiliser une propriété calculée plutôt qu'une méthode.
Par exemple, si on voudrait convertir une devise en une autre 💵. Par exemple, convertir un montant en dollars canadiens 🇨🇦 en dollars américains 🇺🇸:
Bien que ces expressions soient pratiques, elles ne sont destinées qu'aux opérations simples, car elles peuvent rapidement porter à confusion:
- Pourquoi ce montant est-il multiplié par 0.8?
- Quelle devise tente-t-on d'afficher?
Heureusement, les propriétés calculées permettent d'éviter de complexifier inutilement les templates HTML en permettant de retirer toute expression logique de ceux-ci.
Par exemple, la donnée suivante 👇 exprime clairement que l'information affichée correspond à un montant converti en dollars américains 🇺🇸. Aucune expression mathématique ne vient polluer le template:
Pour obtenir une donnée propre comme celle-ci, sans expression, il faut ajouter un objet intitulé computed à l'app Vue. Cet objet contient à son tour différentes propriétés. Chacune de ces propriétés se base sur une ou plusieurs données se trouvant dans data et leur appliquent un traitement quelconque.
Par exemple, multiplier une donnée par 0.8.
La grande force des propriétés calculées est qu'elles surveillent en permanence les données sur lesquelles elles se basent. Ainsi, si l'une de ces données vient à changer, par exemple le montant, le résultat de la propriété calculé se mettra automatiquement à jour en se basant sur la valeur de celle-ci.
Par exemple, la valeur en dollars américains se met automatiquement à jour lorsque le montant en dollars canadien change, puisqu'il s'agit d'une propriété calculée.