Tutorial VueJS 3: le proprietà calcolate con computed

Una proprietà calcolata è un valore derivato da altri valori. Vue la ricalcola quando una delle sue dipendenze cambia, e solo in quel momento. È lo strumento che tiene la logica fuori dal template.

Un primo calcolo

La scheda deve mostrare la marca e il prodotto. Si potrebbe fare nel template:

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

Funziona, ma la logica si sparpaglia nell’HTML. Meglio dichiarare una proprietà calcolata:

<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 riceve una funzione e restituisce un riferimento in sola lettura. Nello script si legge title.value, nel template {{ title }}, come per un ref.

La cache

È la vera differenza rispetto a una funzione qualunque. Una proprietà calcolata conserva il proprio risultato e lo ricalcola solo se una delle sue dipendenze è cambiata.

<!-- 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>

Su una concatenazione la differenza è nulla. Su un ordinamento o un filtro applicato a diverse centinaia di voci, e mostrato in tre punti della pagina, diventa netta.

Pilotare la variante selezionata

Passiamo a un caso utile. Ora ogni variante ha la propria quantità in 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>

Il blu è disponibile, il rosso no. L’immagine mostrata e la disponibilità dipendono ora entrambe dalla variante sotto il cursore. Invece di tenere aggiornate due variabili a mano, conserviamo una sola informazione: quale variante è selezionata.

<script setup>
const selectedVariant = ref(0)

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

Il ciclo passa l’indice, recuperato come al capitolo 4:

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

Il resto si deduce. image e inStock non sono più dati, ma calcoli:

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

Passa il cursore sul pallino rosso: l’immagine cambia, il messaggio diventa «En rupture» e il bottone si spegne grazie al binding di classe. È cambiata una sola variabile, i tre elementi l’hanno seguita.

Quando usare una proprietà calcolata

• Per un valore derivato dallo stato: totale di un carrello, lista filtrata, testo assemblato. È il caso normale.
• Non per un effetto collaterale. Una proprietà calcolata deve essere una funzione pura: legge e restituisce. Non modifica niente, non chiama API, non fa partire richieste. Per quello ci sono watch e watchEffect.
• Non per un valore che cambia da solo, come l’ora corrente: niente avviserebbe Vue che deve ricalcolare.

Una proprietà calcolata in scrittura

Per impostazione predefinita una proprietà calcolata è in sola lettura. Vue avvisa in console se provi ad assegnarle un valore. Per i casi in cui la scrittura ha senso, fornisci una coppia get / set:

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