State

Die Einführung hat dir einen Zähler gezeigt, der funktionierte, und versprochen, ihn zu erklären. Hier ist die Erklärung. Probiere zuerst denselben Zähler mit einer gewöhnlichen Variablen:

<script setup>
let stempel = 0;

function stempelHinzufuegen() {
    stempel++;
    console.log(stempel);
}
</script>

<template>
    <p>Stempel: {{ stempel }}</p>
    <button @click="stempelHinzufuegen">Stempel hinzufügen</button>
</template>

Klicke dreimal auf den Button, und die Konsole zeigt:

1
2
3

Die Variable ändert sich also, aber die Seite sagt immer noch Stempel: 0. Warum? Vue rendert die Vorlage: Es erzeugt daraus die Elemente der Seite, mit den Werten, die die Variablen in diesem Moment haben. Die Vorlage wird nur dann wieder gerendert, wenn Vue weiß, dass sich etwas geändert hat, das die Vorlage verwendet. Eine gewöhnliche Variable kann niemandem sagen, dass sie sich geändert hat, also erfährt Vue nie davon, und die Seite bleibt so, wie sie beim ersten Mal gerendert wurde.

Für Werte, die sich ändern, hat Vue ref():

<script setup>
import { ref } from "vue";

const stempel = ref(0);

function stempelHinzufuegen() {
    stempel.value++;
}
</script>

<template>
    <p>Stempel: {{ stempel }}</p>
    <button @click="stempelHinzufuegen">Stempel hinzufügen</button>
</template>

Jetzt fügt jeder Klick einen Stempel hinzu, und die Seite zeigt ihn sofort an. Was ist neu:

• import { ref } from "vue"; holt die Funktion ref aus Vue, damit du sie in dieser Datei verwenden kannst.
• ref(0) erzeugt eine Ref, ein kleines Objekt, das einen Wert enthält, hier 0. Im Skript steht der Wert in stempel.value, und den änderst du. In der Vorlage ist es weiterhin nur stempel; die nächste Übung erklärt, warum.
• Wenn sich stempel.value ändert, weiß Vue davon und rendert die Vorlage mit dem neuen Wert neu. Du änderst die Seite nicht selbst, wie du es im JavaScript-Kurs mit textContent getan hast. Du änderst die Daten, und Vue ändert die Seite.

Die Daten einer App, die sich ändern können, wie die Anzahl der Stempel, heißen ihr State. Werte, die Vue auf diese Weise verfolgt, sind reaktiv: Die Seite reagiert, wenn sie sich ändern.

Typischer Fehler: keine import-Zeile. Die Seite bleibt leer, und die Konsole meldet ReferenceError: ref is not defined.