VueJS 3-tutorial: computed properties en hoe caching werkt

Een computed property is een waarde die uit andere waarden wordt afgeleid. Vue berekent haar opnieuw zodra een van haar dependencies verandert, en alleen dan. Het is het gereedschap dat je logica buiten de template houdt.

Een eerste berekening

De productkaart moet het merk en het product tonen. Dat kan in de template:

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

Dat werkt, maar de logica raakt verspreid over je HTML. Declareer liever een computed property:

<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 krijgt een functie mee en geeft een read-only referentie terug. In het script lees je title.value, in de template {{ title }}, net als bij een ref.

De caching

Dat is het echte verschil met een gewone functie. Een computed property onthoudt haar resultaat en berekent het alleen opnieuw als een van haar dependencies is veranderd.

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

Bij een concatenatie merk je er niets van. Bij een sortering of een filter over een paar honderd items, op drie plekken in de pagina getoond, wordt het verschil duidelijk.

De geselecteerde variant aansturen

Nu een nuttig geval. Elke variant heeft voortaan zijn eigen voorraad:

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

Blauw is leverbaar, rood niet. De getoonde afbeelding en de beschikbaarheid hangen nu allebei af van de variant waar de muis boven staat. In plaats van twee variabelen met de hand bij te houden, onthouden we één ding: welke variant geselecteerd is.

<script setup>
const selectedVariant = ref(0)

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

De loop geeft de index door, opgehaald zoals in hoofdstuk 4:

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

De rest volgt vanzelf. image en inStock zijn geen data meer, maar berekeningen:

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

Ga met de muis over de rode stip: de afbeelding verandert, de melding wordt “En rupture” en de knop grijst uit dankzij de class binding. Er is één variabele bewogen, alle drie de weergaven zijn meegegaan.

Wanneer gebruik je een computed property

• Voor een waarde die uit de state volgt: het totaal van een winkelwagen, een gefilterde lijst, een samengestelde tekst. Dat is het normale geval.
• Niet voor een side effect. Een computed property hoort een pure functie te zijn: ze leest en geeft terug. Ze wijzigt niets, roept geen API aan en start geen request. Daarvoor bestaan watch en watchEffect.
• Niet voor een waarde die uit zichzelf verandert, zoals de huidige tijd: niets zou Vue vertellen dat er opnieuw gerekend moet worden.

Een schrijfbare computed property

Standaard is een computed property read-only. Vue waarschuwt in de console als je er een waarde aan probeert toe te kennen. Voor de gevallen waarin schrijven zin heeft, geef je een paar get / set mee:

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