Zusammenfassung

In dieser Lektion hast du gelernt:

• computed(() => …) macht aus anderen Werten einen berechneten Wert: eine Summe, eine gefilterte oder sortierte Liste, ein Ja oder ein Nein. Die Funktion gibt den Wert zurück, und Vue berechnet ihn erneut, wann immer sich ein Ref ändert, das sie liest.
• In der Vorlage schreibst du einen berechneten Wert mit seinem Namen, {{ summe }}; im Skript mit .value, auch innerhalb eines anderen berechneten Werts. Ohne .value bekommst du das Objekt: [object Object] in einem Text und Vergleiche, die nie wahr sind.
• Einem berechneten Wert kann man nichts zuweisen; ändere das, woraus er gemacht ist. computed muss wie ref und watch in der import-Zeile stehen.
• Ein berechneter Wert ist besser als eine Funktion, die die Vorlage aufruft: Er liest sich wie ein Wert, und Vue behält ihn, statt ihn bei jedem Rendern der Vorlage neu zu berechnen. sort() ordnet das Array um, das es sortiert, also sortiere eine Kopie: [...menue].sort(…).
• watch(quelle, (neuerWert, alterWert) => { … }) tut etwas, nachdem sich die Quelle, ein Ref oder ein berechneter Wert, geändert hat: den Wert in localStorage speichern, ihn ausgeben und so weiter. Beim Start der App läuft es nicht.
• { deep: true } lässt einen Watcher Änderungen innerhalb eines Arrays oder Objekts sehen, wie push() oder artikel.anzahl++. Ohne sie sieht der Watcher nur ein neues .value.
• { immediate: true } lässt den Watcher auch einmal beim Start der App laufen. watchEffect() läuft sofort und beobachtet jedes Ref, das es liest.
• Berechnete Werte sind für Werte zum Anzeigen, Watcher für Dinge, die zu tun sind.

In der nächsten Lektion, Checkpoint: Budget-Tracker, setzt du all das in einer eigenen App ein: einem Monatsbudget, das zusammenzählt, was du ausgibst, und es sich merkt.

Aber zuerst eine kleine Übung: eine Bewertung des Cafés, mit einer Längenbegrenzung, die beim Tippen herunterzählt, und einem Entwurf, der bleibt, wenn du auf Ausführen klickst.