VueJS-3-Tutorial: berechnete Eigenschaften mit computed

Eine berechnete Eigenschaft ist ein Wert, der sich aus anderen Werten ergibt. Vue berechnet ihn neu, wenn sich eine seiner Abhängigkeiten ändert, und nur dann. Das ist das Werkzeug, das die Logik aus dem Template heraushält.

Eine erste Berechnung

Das Produktdatenblatt soll Marke und Produkt anzeigen. Man könnte das im Template erledigen:

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

Das funktioniert, aber die Logik verteilt sich im HTML. Deklarier lieber eine berechnete Eigenschaft:

<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 bekommt eine Funktion und gibt eine Referenz zurück, die nur gelesen werden kann. Im Skript liest du title.value, im Template {{ title }}, wie bei einem ref.

Das Caching

Das ist der eigentliche Unterschied zu einer gewöhnlichen Funktion. Eine berechnete Eigenschaft merkt sich ihr Ergebnis und berechnet es nur neu, wenn sich eine ihrer Abhängigkeiten geändert hat.

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

Bei einer Verkettung von zwei Strings macht das keinen Unterschied. Bei einer Sortierung oder einem Filter über mehrere hundert Einträge, an drei Stellen der Seite ausgegeben, wird er deutlich.

Die ausgewählte Variante steuern

Jetzt zu einem nützlichen Fall. Jede Variante hat nun ihren eigenen Lagerbestand:

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

Blau ist verfügbar, Rot nicht. Das angezeigte Bild und die Verfügbarkeit hängen jetzt beide von der Variante ab, über der die Maus steht. Statt zwei Variablen von Hand aktuell zu halten, merken wir uns nur eine Information: welche Variante ausgewählt ist.

<script setup>
const selectedVariant = ref(0)

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

Die Schleife gibt den Index weiter, den wir uns wie in Kapitel 4 holen:

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

Der Rest ergibt sich daraus. image und inStock sind keine Daten mehr, sondern Berechnungen:

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

Fahr mit der Maus über das rote Farbfeld: das Bild wechselt, die Meldung springt auf „En rupture“, und der Button wird über das Klassen-Binding ausgegraut. Eine einzige Variable hat sich bewegt, drei Anzeigen sind mitgegangen.

Wann eine berechnete Eigenschaft passt

• Ein aus dem State abgeleiteter Wert: Warenkorbsumme, gefilterte Liste, zusammengesetzter Text. Das ist der Normalfall.
• Nicht für einen Seiteneffekt. Eine berechnete Eigenschaft muss eine reine Funktion sein: sie liest, sie gibt zurück. Sie ändert nichts, ruft keine API auf, löst keinen Request aus. Dafür gibt es watch und watchEffect.
• Nicht für einen Wert, der sich von allein ändert, etwa die aktuelle Uhrzeit: nichts würde Vue mitteilen, dass neu zu rechnen ist.

Eine berechnete Eigenschaft mit Schreibzugriff

Standardmäßig ist eine berechnete Eigenschaft schreibgeschützt. Vue warnt in der Konsole, wenn du ihr einen Wert zuweist. Für die Fälle, in denen Schreiben sinnvoll ist, gibst du ein Paar aus get und set an:

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