Objekte in Refs

Eine Ref kann auch ein Objekt enthalten, das zusammengehörige Dinge an einem Ort bündelt. Hier ist eine Bestellung mit dem Namen des Kunden und einer Notiz:

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

const bestellung = ref({
    name: "Anna",
    notiz: "",
    artikel: ["Espresso"],
});

function notizHinzufuegen() {
    bestellung.value.notiz = "Bitte ohne Zucker.";
}
</script>

<template>
    <p>{{ bestellung.name }}: {{ bestellung.artikel.join(", ") }}</p>
    <p>Notiz: {{ bestellung.notiz }}</p>
    <button @click="notizHinzufuegen">Ohne Zucker</button>
</template>

Im Skript ist bestellung.value das Objekt, und bestellung.value.notiz ist eine seiner Eigenschaften. Änderst du eine Eigenschaft, rendert Vue die Seite neu, genau wie bei einer Änderung von .value selbst. Vue bemerkt auch Änderungen tiefer im Objekt: bestellung.value.artikel.push("Pfefferminztee") fügt dem Array im Objekt etwas hinzu, und die Seite zeigt es an. In der Vorlage heißt es bestellung.notiz und bestellung.artikel, wie immer ohne .value.

In anderen Tutorials begegnet dir vielleicht eine weitere Funktion von Vue, reactive(). Sie macht ein Objekt reaktiv, ohne eine Kiste darum, du schreibst also auch im Skript bestellung.notiz:

import { reactive } from "vue";

const bestellung = reactive({ name: "Anna", notiz: "" });
bestellung.notiz = "Bitte ohne Zucker.";

Sie funktioniert nur für Objekte und Arrays, nicht für Zahlen oder Text, und du kannst kein neues Objekt an die Stelle des alten setzen. Deshalb verwendet dieser Kurs ref für alles, wie viele Vue-Entwickler auch.