Propriétés calculées

Il est possible de faire des expressions de base dans un template Vue. 

Par exemple, afin de convertir une devise en une autre 💵:

{{ amount * 0.8 }}

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 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 convertit en dollars américains 🇺🇸. Aucune expression mathématique ne vient polluer le template:

{{ amountToUSD }}

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.

computed: {
  amountToUSD() {
    return this.amount * 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.

CodePen | smnarnold 👀