computed in Vue: abgeleiteter Zustand

Problem

Die Summe fällt zurück

Der Warenkorb enthält Weißbrot und Frischmilch. Klick beim Brot auf „+“: Die Anzahl und die Summe wachsen. Entferne jetzt die Milch.

Vue

<script setup>
import { ref } from 'vue';
import { money } from './money.js';

const items = ref([
  { id: 1, name: 'Weißbrot', price: 1.2, qty: 2 },
  { id: 5, name: 'Frischmilch', price: 1.6, qty: 1 },
]);
const count = ref(3);
const total = ref(4);

function more(item) {
  item.qty++;
  count.value++;
  total.value += item.price;
}

function remove(item) {
  items.value = items.value.filter((i) => i.id !== item.id);
  count.value -= item.qty;
  // total ist vergessen
}
</script>

<template>
  <main>
    <h1>Dein Warenkorb</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span>{{ item.name }} × {{ item.qty }}</span>
        <button type="button" :aria-label="`Mehr ${item.name}`" @click="more(item)">+</button>
        <button type="button" :aria-label="`Entfernen ${item.name}`" @click="remove(item)">Entfernen</button>
      </li>
    </ul>
    <p>Artikel: {{ count }}</p>
    <p>Gesamt: {{ money(total) }}</p>
  </main>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Die Zeile verschwindet, die Anzahl sinkt auf 3, und die Summe bleibt bei 5,20 €. Die Komponente hält drei Zustände: items, count und total. Jeder Klick muss alle drei ändern, und die Funktion zum Entfernen ändert zwei. Das ist dieselbe Abweichung wie in der Lektion „Eine Liste aus Daten“, nur innerhalb einer Komponente. Die Bibliothek zeichnet genau das, was du ihr gibst. Du gibst ihr zwei Wahrheiten über einen Warenkorb.

Die Idee

Berechnen, nicht behalten

Frag bei jedem Stück Zustand: Kann ich es aus dem anderen Zustand oder aus den Props berechnen? Wenn ja, ist es kein Zustand. Die Anzahl ist die Summe der Mengen in items. Die Summe ist die Summe aus Preis mal Menge. Beides wird berechnet.

Ein solcher Wert heißt abgeleiteter Zustand (derived state). Du hältst nur items und berechnest den Rest daraus, jedes Mal, wenn die Komponente rendert.

const items = ref(START);
const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));
const total = computed(() => items.value.reduce((sum, i) => sum + i.price * i.qty, 0));

<script setup> läuft einmal, wenn die Komponente erzeugt wird. Deshalb steht die Berechnung in einer Funktion, die an computed übergeben wird. Vue merkt sich, dass sie items liest, und führt sie erneut aus, wenn sich items ändern. Im Template schreibst du {{ total }}, ohne .value.

Jetzt ändern die Funktionen more und remove nur items. Es bleibt nichts mehr, was sie vergessen könnten.

Sieh es dir an

Sieh die berechneten Werte und die Kopie

Links sind der Warenkorb und eine Kopie der Summe, getrennt gehalten. Rechts sind die drei berechneten Werte.

<script setup>
const items = ref(START);
const savedTotal = ref(26.9);

const count = computed(() =>
  items.value.reduce((s, i) => s + i.qty, 0),
);
const total = computed(() =>
  items.value.reduce((s, i) => s + i.price * i.qty, 0),
);
const free = computed(() => total.value >= 30);

function more(item) {
  item.qty++;
  savedTotal.value += item.price;
}

function remove(item) {
  items.value = items.value.filter((i) => i.id !== item.id);
}
</script>

Schritt für Schritt, in Worten

Links ist der Zustand: die Warenkorb-Einträge items. Darunter ist ein zweiter Zustand, savedTotal: dieselbe Summe, als Kopie gehalten.
Rechts stehen count, total und free: berechnete Werte (computed). Vue merkt sich, dass sie items lesen, und berechnet sie neu, wenn sich items ändern: 26,90 €, bis zur kostenlosen Lieferung fehlen 3,10 €.
more(Käse): items ändern sich, und die drei Pfeile leuchten auf. Die Summe ist 34,80 €, die Lieferung ist kostenlos. more() aktualisiert auch savedTotal von Hand, also stimmt die Kopie noch.
remove(Käse): items ändern sich, und count, total und free folgen von selbst: 3,20 €. Für savedTotal in remove() hat niemand eine Zeile geschrieben.
Die Kopie sagt 34,80 €, der Warenkorb ist 3,20 €. Kein Fehler, nur eine falsche Zahl: Der Zustand und seine Kopie sind auseinandergelaufen.
Die Regel: Halte nur, was sich nicht berechnen lässt. Was sich aus dem Zustand ergibt, wird daraus berechnet, und es gibt keine Kopie, die man vergessen könnte.

Die berechneten Werte folgen dem Warenkorb bei jeder Änderung, weil sie kein eigenes Gedächtnis haben. Die Kopie folgt nur, solange jemand daran denkt, sie zu aktualisieren. Die erste Funktion, die es vergisst, macht sie falsch.

Probier es aus

Berechne Anzahl und Summe

Der Warenkorb hält count und total als eigene Zustände, und remove() vergisst die Summe. Entferne beide Zustände und berechne die Anzahl und die Summe aus items. Die Prüfung klickt beim Brot auf „+“, entfernt dann die Milch und schaut auf die Anzahl und die Summe.

Vue

<script setup>
import { ref } from 'vue';
import { money } from './money.js';

const items = ref([
  { id: 1, name: 'Weißbrot', price: 1.2, qty: 2 },
  { id: 5, name: 'Frischmilch', price: 1.6, qty: 1 },
]);
const count = ref(3);
const total = ref(4);

function more(item) {
  item.qty++;
  count.value++;
  total.value += item.price;
}

function remove(item) {
  items.value = items.value.filter((i) => i.id !== item.id);
  count.value -= item.qty;
  // total ist vergessen
}
</script>

<template>
  <main>
    <h1>Dein Warenkorb</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span>{{ item.name }} × {{ item.qty }}</span>
        <button type="button" :aria-label="`Mehr ${item.name}`" @click="more(item)">+</button>
        <button type="button" :aria-label="`Entfernen ${item.name}`" @click="remove(item)">Entfernen</button>
      </li>
    </ul>
    <p>Artikel: {{ count }}</p>
    <p>Gesamt: {{ money(total) }}</p>
  </main>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Lösung

App.vue

<script setup>
import { ref, computed } from 'vue';
import { money } from './money.js';

const items = ref([
  { id: 1, name: 'Weißbrot', price: 1.2, qty: 2 },
  { id: 5, name: 'Frischmilch', price: 1.6, qty: 1 },
]);
// Anzahl und Summe: bei jedem Rendern berechnet.
const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));
const total = computed(() => items.value.reduce((sum, i) => sum + i.price * i.qty, 0));

function more(item) {
  item.qty++;
}

function remove(item) {
  items.value = items.value.filter((i) => i.id !== item.id);
}
</script>

<template>
  <main>
    <h1>Dein Warenkorb</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span>{{ item.name }} × {{ item.qty }}</span>
        <button type="button" :aria-label="`Mehr ${item.name}`" @click="more(item)">+</button>
        <button type="button" :aria-label="`Entfernen ${item.name}`" @click="remove(item)">Entfernen</button>
      </li>
    </ul>
    <p>Artikel: {{ count }}</p>
    <p>Gesamt: {{ money(total) }}</p>
  </main>
</template>

money.js

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

style.css

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Probier es aus

Fülle die Lücke

Die Anzahl wird aus dem Warenkorb berechnet. Was gehört in die Lücke?

const items = ref(START);
const count = (() => items.value.reduce((sum, i) => sum + i.qty, 0));

computed: Vue führt die Funktion erneut aus, wenn sich items ändern, und behält das Ergebnis zwischen den Renderings.

Die Idee

Wann man das Ergebnis behält

computed behält das Ergebnis schon. Es wird berechnet, wenn du es zum ersten Mal liest. Danach liefert es den gemerkten Wert, solange sich die Daten, die es gelesen hat, nicht ändern. Zwei Stellen im Template mit {{ total }} berechnen die Summe also einmal.

const sorted = computed(() => products.value.toSorted(byPrice));

Eine Funktion, die im Template aufgerufen wird ({{ totalOf(items) }}), liefert auch die richtige Summe. Der Unterschied: Sie läuft bei jedem Rendern der Komponente, computed nur, wenn sich seine Abhängigkeiten ändern. Die Funktion in computed liest nur und gibt zurück. Sie ändert keinen Zustand und ruft kein fetch auf.

Die Idee

Auch der Filter wird berechnet

Der Katalog hat die Buttons „Alle“, „Brot“ und „Milch“. Die Versuchung ist, zwei Arrays zu halten: alle Produkte und die sichtbaren. Aber die sichtbaren ergeben sich aus zwei anderen Tatsachen: der vollständigen Liste und der gewählten Kategorie. Du hältst nur die Kategorie:

const category = ref('all');
const visible = computed(() =>
  category.value === 'all' ? PRODUCTS : PRODUCTS.filter((p) => p.category === category.value),
);

Beim Sortieren ist es dasselbe: Du hältst „nach Preis“ oder „nach Name“, und die sortierte Liste wird berechnet. Vorsicht bei sort(): Es sortiert das Array an Ort und Stelle, das heißt, es ändert den Zustand. toSorted() gibt ein neues Array zurück und lässt das alte in Ruhe.

Probier es aus

Nur die Kategorie

Die Buttons ändern die Kategorie, aber die Liste zeigt immer alles. Berechne die sichtbaren Produkte aus der Kategorie und zeige über der Liste „Angezeigt: 3 von 5“. Die Prüfung wählt „Milch“, dann „Brot“, dann „Alle“.

Vue

<script setup>
import { ref } from 'vue';
import ProductCard from './ProductCard.vue';

const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2, category: 'bread' },
  { id: 2, name: 'Vollkornbrot', price: 2.1, category: 'bread' },
  { id: 5, name: 'Frischmilch', price: 1.6, category: 'milk' },
  { id: 6, name: 'Joghurt', price: 0.9, category: 'milk' },
  { id: 7, name: 'Weißkäse', price: 7.9, category: 'milk' },
];
const CATEGORIES = [
  { id: 'all', name: 'Alle' },
  { id: 'bread', name: 'Brot' },
  { id: 'milk', name: 'Milch' },
];

const category = ref('all');
const visible = PRODUCTS;
</script>

<template>
  <main>
    <h1>Produkte</h1>
    <button v-for="c in CATEGORIES" :key="c.id" type="button" :aria-pressed="category === c.id" @click="category = c.id">
      {{ c.name }}
    </button>
    <p>Angezeigt: {{ visible.length }} von {{ PRODUCTS.length }}</p>
    <ul>
      <ProductCard v-for="p in visible" :key="p.id" :product="p" />
    </ul>
  </main>
</template>

<script setup>
import { money } from './money.js';

defineProps(['product']);
</script>

<template>
  <li>
    <span>{{ product.name }}</span> {{ money(product.price) }}
  </li>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Lösung

App.vue

<script setup>
import { ref, computed } from 'vue';
import ProductCard from './ProductCard.vue';

const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2, category: 'bread' },
  { id: 2, name: 'Vollkornbrot', price: 2.1, category: 'bread' },
  { id: 5, name: 'Frischmilch', price: 1.6, category: 'milk' },
  { id: 6, name: 'Joghurt', price: 0.9, category: 'milk' },
  { id: 7, name: 'Weißkäse', price: 7.9, category: 'milk' },
];
const CATEGORIES = [
  { id: 'all', name: 'Alle' },
  { id: 'bread', name: 'Brot' },
  { id: 'milk', name: 'Milch' },
];

const category = ref('all');
const visible = computed(() =>
  category.value === 'all' ? PRODUCTS : PRODUCTS.filter((p) => p.category === category.value),
);
</script>

<template>
  <main>
    <h1>Produkte</h1>
    <button v-for="c in CATEGORIES" :key="c.id" type="button" :aria-pressed="category === c.id" @click="category = c.id">
      {{ c.name }}
    </button>
    <p>Angezeigt: {{ visible.length }} von {{ PRODUCTS.length }}</p>
    <ul>
      <ProductCard v-for="p in visible" :key="p.id" :product="p" />
    </ul>
  </main>
</template>

ProductCard.vue

<script setup>
import { money } from './money.js';

defineProps(['product']);
</script>

<template>
  <li>
    <span>{{ product.name }}</span> {{ money(product.price) }}
  </li>
</template>

money.js

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

style.css

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Die Idee

Eine Kopie einer Prop

Derselbe Fehler passiert zwischen Komponenten. App gibt 20 % Rabatt und übergibt die neuen Preise an jede ProductCard. Die Karte aber merkt sich den Preis, den sie beim ersten Mal bekommen hat:

Vue

<script setup>
import { ref, computed } from 'vue';
import ProductCard from './ProductCard.vue';

const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];

const sale = ref(false);
const products = computed(() => (sale.value ? PRODUCTS.map((p) => ({ ...p, price: p.price * 0.8 })) : PRODUCTS));
</script>

<template>
  <main>
    <h1>Produkte</h1>
    <button type="button" :aria-pressed="sale" @click="sale = !sale">20 % Rabatt</button>
    <ul>
      <ProductCard v-for="p in products" :key="p.id" :product="p" />
    </ul>
  </main>
</template>

<script setup>
import { ref } from 'vue';
import { money } from './money.js';

const props = defineProps(['product']);
const price = ref(props.product.price);
</script>

<template>
  <li>
    <span>{{ product.name }}</span> {{ money(price) }}
  </li>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Klick auf „20 % Rabatt“. Der Button ist gedrückt, und das Brot kostet immer noch 1,20 €.

const price = ref(props.product.price) kopiert die Zahl einmal, wenn <script setup> läuft. Danach ist props.product neu, aber price ist eine eigene Box, die niemand ändert.

Die Lösung ist, nicht zu kopieren: Zeig product.price direkt an. Soll die Karte etwas zeigen, das aus einer Prop berechnet wird (den Preis mit Mehrwertsteuer, den Preis pro Einheit), berechne es beim Rendern mit computed(() => props.product.price * …).

Probier es aus

Finde den Fehler

Die Käuferin drückt „+“: Die Menge in der Zeile wird 3, und die Zeilensumme bleibt wie bei 2. Welche Zeile ist schuld?

Wähle die Zeile mit dem Fehler.

Zeile 5 kopiert props.item.price * props.item.qty einmal in eine ref. Es müsste const subtotal = computed(() => props.item.price * props.item.qty); heißen.

Genauer, für Neugierige

Wenn die Kopie Absicht ist. Manchmal willst du einen Wert von außen nur als Start: Ein Bearbeitungsformular beginnt mit dem aktuellen Namen, und dann tippt die Person. Dann ist die Kopie richtig, aber sag es im Namen: die Prop initialName, der Zustand name. Wer den Code liest, sieht, dass Änderungen von außen nicht verfolgt werden.

Ein beschreibbares computed. computed({ get, set }) liefert einen Wert, dem man auch etwas zuweisen kann: set macht aus dem neuen Wert eine Änderung des echten Zustands. Es wird selten gebraucht, zum Beispiel für ein Feld, das an einen Teil eines Objekts gebunden ist.

computed ist faul. Liest niemand total, läuft die Berechnung nicht. Deshalb gibt es darin keine Nebenwirkungen: Du weißt nicht, wann und wie oft sie läuft. Für eine Aktion bei einer Änderung gibt es watch, das nächste Modul.

Die Options API. Im älteren Stil stehen die berechneten Werte im Objekt computed: { total() { … } }. Die Idee ist dieselbe.

Dasselbe gilt für Daten vom Server. Gibt der Server die Produkte zurück und du hältst „Anzahl der Produkte“ getrennt, können die beiden nach einem neuen Laden auseinanderlaufen. Halte die Antwort und berechne die Anzahl.

Übung

Kostenlose Lieferung

Der Warenkorb hat die Buttons „−“ und „+“ an jeder Zeile („−“ bei der letzten Einheit entfernt die Zeile). Zeige unter der Liste „Artikel: 4“, „Gesamt: 18,20 €“ und „Bis zur kostenlosen Lieferung fehlen noch 11,80 €“, und ab 30 € (FREE_FROM) nur „Die Lieferung ist kostenlos“. Alles wird aus items berechnet. Die Prüfung legt Käse bis 34,00 € hinein, geht dann wieder unter 30 € und entfernt das Brot.

Vue

<script setup>
import { ref } from 'vue';
import { money } from './money.js';

const FREE_FROM = 30;
const items = ref([
  { id: 7, name: 'Weißkäse', price: 7.9, qty: 2 },
  { id: 1, name: 'Weißbrot', price: 1.2, qty: 2 },
]);
// Dein Code: die Anzahl, die Summe und die Lieferung, berechnet aus items.

function more(item) {
  item.qty++;
}

function less(item) {
  if (item.qty === 1) items.value = items.value.filter((i) => i.id !== item.id);
  else item.qty--;
}
</script>

<template>
  <main>
    <h1>Dein Warenkorb</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span>{{ item.name }} × {{ item.qty }}</span>
        <button type="button" :aria-label="`Weniger ${item.name}`" @click="less(item)">−</button>
        <button type="button" :aria-label="`Mehr ${item.name}`" @click="more(item)">+</button>
      </li>
    </ul>
  </main>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Lösung

App.vue

<script setup>
import { ref, computed } from 'vue';
import { money } from './money.js';

const FREE_FROM = 30;
const items = ref([
  { id: 7, name: 'Weißkäse', price: 7.9, qty: 2 },
  { id: 1, name: 'Weißbrot', price: 1.2, qty: 2 },
]);
const count = computed(() => items.value.reduce((sum, i) => sum + i.qty, 0));
const total = computed(() => items.value.reduce((sum, i) => sum + i.price * i.qty, 0));
const free = computed(() => total.value >= FREE_FROM);

function more(item) {
  item.qty++;
}

function less(item) {
  if (item.qty === 1) items.value = items.value.filter((i) => i.id !== item.id);
  else item.qty--;
}
</script>

<template>
  <main>
    <h1>Dein Warenkorb</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        <span>{{ item.name }} × {{ item.qty }}</span>
        <button type="button" :aria-label="`Weniger ${item.name}`" @click="less(item)">−</button>
        <button type="button" :aria-label="`Mehr ${item.name}`" @click="more(item)">+</button>
      </li>
    </ul>
    <p>Artikel: {{ count }}</p>
    <p>Gesamt: {{ money(total) }}</p>
    <p v-if="free">Die Lieferung ist kostenlos</p>
    <p v-else>Bis zur kostenlosen Lieferung fehlen noch {{ money(FREE_FROM - total) }}</p>
  </main>
</template>

money.js

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

style.css

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
ul { list-style: none; padding: 0; }
li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
li span { flex: 1; }
button { font: inherit; }
button[aria-pressed="true"] { background: #2f6f4f; color: white; }

Test

Teste dich

1. Der Warenkorb hält items. Was davon sollte ein eigener Zustand sein?Nichts: Die Anzahl, die Summe und „ist die Lieferung kostenlos“ werden aus items berechnetDie Anzahl, weil sie sich bei jedem Klick ändertDie Summe, weil sie an zwei Stellen angezeigt wird

Alle drei ergeben sich aus items. Hältst du sie getrennt, muss jede Funktion, die den Warenkorb ändert, auch sie im Kopf behalten. Beim Rendern berechnet, können sie nicht zurückfallen.

2. Was ist der Unterschied zwischen computed und einer Funktion, die im Template aufgerufen wird?Die Funktion im Template aktualisiert sich nicht, nur computedEs gibt keinen Unterschied, computed ist nur länger zu schreibencomputed behält das Ergebnis und rechnet nur neu, wenn sich seine Abhängigkeiten ändern; die Funktion läuft bei jedem Rendern

Beide liefern das richtige Ergebnis. computed ist bei einer teuren Berechnung oder vielen Renderings schneller, weil es sich das Ergebnis merkt, bis sich die gelesenen Daten ändern.

3. const price = ref(props.product.price); in ProductCard. Das Elternelement übergibt einen neuen Preis. Was zeigt die Karte?Den alten Preis: Der Wert wurde einmal kopiert, als die Karte erzeugt wurdeDen neuen Preis, weil sich Props aktualisierenEinen Fehler in der Konsole

Der Anfangswert wird einmal übernommen. Danach hat die Karte ihre eigene Kopie, und die Prop ändert sich ohne sie. Lies product.price direkt.

4. Die Liste wird nach Kategorie gefiltert. Was gehört in den Zustand?Nur die gewählte Kategorie; die sichtbaren Produkte werden daraus berechnetNur die sichtbaren ProdukteDie Kategorie und die sichtbaren Produkte

Abgeleiteter Zustand

Cookies