Tutoriel VueJS 3 – Propriétés calculées

Une propriété calculée est une valeur dérivée d’autres valeurs. Vue la recalcule quand une de ses dépendances change, et seulement à ce moment-là. C’est l’outil qui garde la logique hors du gabarit.

Un premier calcul

La fiche doit afficher la marque et le produit. On pourrait le faire dans le gabarit :

<h1>{{ brand + ' ' + product }}</h1>

Ça fonctionne, mais la logique se disperse dans le HTML. Déclarez plutôt une propriété calculée :

<script setup>
import { computed, ref } from 'vue'

const product = ref('T-Shirt')
const brand = ref('Gekkode')

const title = computed(() => `${brand.value} ${product.value}`)
</script>

<template>
  <h1>{{ title }}</h1>
</template>

computed reçoit une fonction et renvoie une référence en lecture seule. Dans le script, on lit title.value, dans le gabarit, {{ title }}, comme pour un ref.

La mise en cache

C’est la vraie différence avec une fonction ordinaire. Une propriété calculée retient son résultat et ne le recalcule que si l’une de ses dépendances a changé.

<!-- appelée à chaque rendu, même si rien n’a changé -->
<p>{{ calculerTitre() }}</p>

<!-- calculée une fois, puis relue depuis le cache -->
<p>{{ title }}</p>

Sur une concaténation, la différence est nulle. Sur un tri ou un filtre appliqué à plusieurs centaines d’entrées, et affiché à trois endroits de la page, elle devient nette.

Piloter la déclinaison sélectionnée

Passons à un cas utile. Chaque déclinaison a maintenant sa propre quantité en stock :

<script setup>
const variants = ref([
  { id: 2234, color: '#2563eb', image: '/images/t-shirt-bleu.svg', quantity: 20 },
  { id: 2235, color: '#dc2626', image: '/images/t-shirt-rouge.svg', quantity: 0 }
])
</script>

Le bleu est disponible, le rouge non. L’image affichée et la disponibilité dépendent maintenant tous deux de la déclinaison survolée. Plutôt que de maintenir deux variables à jour à la main, retenons une seule information : laquelle est sélectionnée.

<script setup>
const selectedVariant = ref(0)

function updateVariant(index) {
  selectedVariant.value = index
}
</script>

La boucle transmet l’index, récupéré comme au chapitre 4 :

<div
  v-for="(variant, index) in variants"
  :key="variant.id"
  class="color-circle"
  :style="{ backgroundColor: variant.color }"
  @mouseover="updateVariant(index)"
></div>

Le reste se déduit. image et inStock ne sont plus des données mais des calculs :

<script setup>
const image = computed(() => variants.value[selectedVariant.value].image)
const inStock = computed(() => variants.value[selectedVariant.value].quantity > 0)
</script>

Survolez la pastille rouge : l’image change, le message passe à « En rupture », et le bouton se grise grâce à la liaison de classe. Une seule variable a bougé, les trois affichages ont suivi.

Quand utiliser une propriété calculée

• Une valeur dérivée de l’état : total d’un panier, liste filtrée, texte assemblé. C’est le cas normal.
• Pas pour un effet de bord. Une propriété calculée doit être une fonction pure : elle lit, elle renvoie. Elle ne modifie rien, n’appelle pas d’API, ne déclenche pas de requête. Pour cela, il y a watch et watchEffect.
• Pas pour une valeur qui change seule, comme l’heure courante : rien ne préviendrait Vue qu’il faut recalculer.

Une propriété calculée en écriture

Par défaut une propriété calculée est en lecture seule. Vue prévient dans la console si vous tentez de lui affecter une valeur. Pour les cas où l’écriture a un sens, fournissez un couple get / set :

const nomComplet = computed({
  get: () => `${prenom.value} ${nom.value}`,
  set: (valeur) => {
    [prenom.value, nom.value] = valeur.split(' ')
  }
})