Propriété calculée¶

Qu'est-ce que c'est¶

Pour modifier une valeur dynamiquement et pour des raison de performances, il convient d'utiliser une propriété calculée (computed property) plutôt qu'une méthode.

C'est à dire que si une valeur doit être recalculée en fonction du changement d'une ou plusieurs autres valeurs, il est préférable d'utiliser une propriété calculée.

L'exemple de la devise CAD vers USD¶

Par exemple, si on voudrait convertir une devise en une autre 💵, disons convertir un montant en dollars canadiens 🇨🇦 en dollars américains 🇺🇸:

<div>
    {{ amount * 0.8 }}
</div>

On nomme ce type d'instructions qui s'écrivent directement dans le template HTML instructions en ligne (inline statements). Bien qu'elles soient pratiques, elles ne sont destinées qu'aux opérations très simples car elles peuvent rapidement porter à confusion:

Pourquoi ce montant est-il multiplié par 0.8?
Quelle devise tente-t-on d'afficher ici?

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:

<div>
    {{ amountToUSD }}
</div>

Comment on l'utilise?¶

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 force des propriétés calculées

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, comme le montant amount, le résultat de la propriété calculée amountToUSD se mettra automatiquement à jour en se basant sur la valeur de celle-ci. En d'autres mots, la valeur en dollars américains amountToUSD se met automatiquement à jour lorsque le montant en dollars canadien amount change, puisqu'il s'agit d'une propriété calculée.

Dans l'exemple ci-dessous, modifiez le montant de base en CAD afin de voir le montant en USD être recalculé automatiquement.

See the Pen Vue propriété calculé - Convertisseur de devise by TIM Montmorency (@tim-momo) on CodePen.

Autre exemple de propriété calculée¶

Autre exemple de propriété calculée avec notre fameux acteur Timothée Chalamet. Entrez un nom de film dans lequel il a interprété un rôle et vous verrez le titre se mettre à jour. C'est grâce à la propriété calculée nommée titleActor.

See the Pen DEMO VueJS | v-if by TIM Montmorency (@tim-momo) on CodePen.

En savoir plus sur propriétés calculées - computed properties

Exercice¶

Lien à venir