Zusammenfassung

In dieser Lektion hast du gelernt:

• Eine Komponente hat einen Lebenszyklus: Sie wird erstellt (ihr <script setup> läuft), eingehängt (ihre Elemente kommen in die Seite), aktualisiert (nach jeder Änderung ihres States) und ausgehängt (aus der Seite entfernt, zum Beispiel durch v-if, und ihr State mit ihr).
• Lifecycle-Hooks führen deinen Code zu diesen Zeitpunkten aus: onMounted(() => { … }), onUpdated() und onUnmounted(), aus "vue" importiert und oben im <script setup> aufgerufen.
• Daten aus einer Datei lädst du in onMounted, mit einer async-Funktion, fetch() und antwort.json(). Mit einem Ref wie laedt zeigt die Vorlage in der Zwischenzeit Wird geladen…. Schreibe nie await ganz oben ins <script setup>: Die Komponente zeigt dann nichts.
• antwort.ok ist false, wenn der Server mit einem Fehler geantwortet hat, etwa 404 Not Found bei einem falschen Dateinamen. Prüfe es und zeige eine Fehlermeldung statt der Daten.
• Was eine Komponente startet, stoppt sie auch: Ein Intervall, das in onMounted startet, wird in onUnmounted mit clearInterval() gestoppt. Sonst läuft es weiter, wenn die Komponente schon weg ist.
• Ein Template Ref gibt dir ein Element der Vorlage: ref="suchfeld" in der Vorlage und const suchfeld = useTemplateRef("suchfeld"); im Skript. suchfeld.value ist das Element, sobald die Komponente eingehängt ist, und davor null.
• Was in localStorage gespeichert ist, liest du, wenn der Ref erstellt wird, weil es sofort antwortet, und watch speichert es, wenn es sich ändert.

In der nächsten Lektion, Composables, holst du Code wie das Laden der Speisekarte aus den Komponenten heraus in eigene Funktionen, die jede Komponente benutzen kann.

Aber übe zuerst auf der Bewertungsseite des Cafés: Sie lädt, was die Gäste geschrieben haben, setzt den Cursor in das Feld für deine eigene Bewertung und behält, was du geschrieben hast, auch wenn du die Seite schließt.