.value im Skript

Eine Ref ist wie eine Kiste mit einem Wert darin. Im Skript öffnest du die Kiste mit .value, sowohl um den Wert zu lesen als auch um ihn zu ändern:

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

const tassen = ref(0);

function tasseHinzufuegen() {
    tassen.value++;
}
</script>

<template>
    <p>Tassen heute: {{ tassen }}</p>
    <p>{{ tassen > 2 ? "Vielleicht mal einen Tee?" : "Genieße deinen Kaffee!" }}</p>
    <button @click="tasseHinzufuegen">Noch ein Kaffee</button>
</template>

In der Vorlage steht nur tassen, ohne .value, in {{ }} genauso wie in der Bedingung. Vue entpackt Refs in der Vorlage: Es liest ihr .value für dich. Die Vorlage ist der Ort, an dem Refs am meisten verwendet werden, so sparst du dir, immer wieder .value zu schreiben. Das Skript ist aber gewöhnliches JavaScript, und dort ist tassen die Kiste, die Ref selbst.

Und warum const, wenn sich die Zahl ändert? Weil tassen immer noch dieselbe Kiste ist; nur ihr Inhalt ändert sich. tassen.value++ ändert den Inhalt, was const erlaubt. Was const nicht erlaubt, ist, etwas anderes in tassen selbst zu legen, und das willst du ohnehin nie: Vue würde den Überblick verlieren. Refs sind also immer const.

Typische Fehler:

• tassen++ im Skript, ohne .value. Es versucht, die Konstante tassen zu ändern, deshalb meldet die Konsole TypeError: Assignment to constant variable., und die Seite bleibt, wie sie war.
• {{ tassen.value }} in der Vorlage. Vue hat die Ref dort schon entpackt, tassen ist also die Zahl, und eine Zahl hat kein value. Die Seite zeigt an seiner Stelle nichts an.
• console.log(tassen) gibt die Kiste aus, etwa RefImpl { dep: Dep { … }, __v_isRef: true, … _value: 2 }. Um die Zahl zu sehen, gib tassen.value aus.