ref() und reactive()
Erstellen Sie mit ref() reaktive Primitive, umschließen Sie Objekte mit reactive() und verstehen Sie, wann welches Verfahren geeignet ist und wie Sie über .value auf ref-Werte zugreifen.
ref() und reactive() ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Reaktivität in Vue 3
Die Composition API von Vue 3 verwendet reaktive Primitive, um den Zustand zu verfolgen. Zwei zentrale Funktionen sind ref() für primitive Werte und reactive() für Objekte. Änderungen daran aktualisieren die Benutzeroberfläche automatisch.
ref() für primitive Werte
ref(value) verpackt einen Wert in einen reaktiven Container. Greifen Sie in Skripten über .value auf den Wert zu und ändern Sie ihn darüber. In Templates entpackt Vue Refs automatisch – .value ist dort nicht erforderlich.
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('Alice');
function increment() {
count.value++; // .value in script
}
</script>
<template>
<p>{{ count }}</p> <!-- no .value in template -->
<button @click="increment">+</button>
</template>reactive() für Objekte
reactive(object) gibt einen tief reaktiven Proxy des Objekts zurück. Sie greifen direkt auf die Eigenschaften zu – .value ist nirgendwo erforderlich.
<script setup>
import { reactive } from 'vue';
const form = reactive({
email: '',
password: '',
rememberMe: false
});
// Mutate directly:
form.email = 'user@example.com';
</script>
<template>
<input v-model="form.email">
</template>ref im Vergleich zu reactive – wann welche Funktion verwenden?
Verwenden Sie ref() für primitive Werte (String, Zahl, Boolean), nullbare Werte und Rückgabewerte aus Composables (leichter zu destrukturieren). Verwenden Sie reactive() für zusammengehörige Daten, die in einem Objekt gebündelt sind.
Stolperfalle bei der Destrukturierung von reactive()
Beim Destrukturieren eines reaktiven Objekts geht die Reaktivität verloren, weil die extrahierten Eigenschaften normale Werte und keine reaktiven Refs sind.
const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking
// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;toRef und toRefs
toRef(obj, 'key') erstellt einen Ref, der mit einer einzelnen Eigenschaft verknüpft ist. toRefs(obj) wandelt alle Eigenschaften eines reaktiven Objekts in einzelne, verknüpfte Refs um – sie können anschließend sicher destrukturiert werden.
import { toRefs } from 'vue';
const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'ref() für DOM-Elemente
Verwenden Sie ref(null) zusammen mit einem passenden ref-Attribut im Template, um eine reaktive Referenz auf ein DOM-Element oder eine untergeordnete Komponenteninstanz zu erhalten.
<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref<HTMLInputElement | null>(null);
onMounted(() => {
inputEl.value?.focus(); // now the DOM element is available
});
</script>
<template>
<input ref="inputEl" type="text">
</template>isRef und unref
isRef(val) prüft, ob ein Wert ein Ref ist. unref(val) entpackt einen Ref oder gibt den Wert unverändert zurück, wenn es kein Ref ist. Das ist nützlich in Composables, die sowohl Refs als auch normale Werte akzeptieren.
import { isRef, unref } from 'vue';
function double(val: Ref<number> | number) {
return unref(val) * 2; // works with both ref and plain number
}shallowRef und shallowReactive
shallowRef() ist nur auf der obersten Ebene reaktiv, nicht tiefgreifend. Für Objekte gilt dasselbe bei shallowReactive(). Verwenden Sie diese Funktionen zur Leistungsoptimierung, wenn keine tiefe Reaktivität erforderlich ist, etwa bei großen unveränderlichen Datenstrukturen.
reactive() verändern im Vergleich zum Ersetzen
Mit reactive() verändern Sie Eigenschaften direkt. Sie können nicht das gesamte Objekt ersetzen, da reactive() dieselbe Referenz benötigt. Verwenden Sie zum Ersetzen ref(), da damit ref.value = newObject möglich ist.
const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem]; // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassignTiefe Reaktivität
reactive() ist standardmäßig tief reaktiv – Vue verfolgt Änderungen an verschachtelten Objekten und Arrays. Das ist praktisch, kann bei sehr großen Objekten jedoch teuer sein. Für leistungsabhängige Anwendungsfälle sollten Sie shallowReactive in Betracht ziehen.
Schnelltest
Warum geht beim Destrukturieren eines reactive()-Objekts die Reaktivität verloren?
Zusammenfassung: ref() und reactive()
ref() verpackt primitive Werte; in Skripten erfolgt der Zugriff über .value, in Templates werden Refs automatisch entpackt. reactive() macht Objekte tief reaktiv; verändern Sie Eigenschaften direkt. Beim Destrukturieren geht die Reaktivität verloren – verwenden Sie toRefs(). ref(null) dient für Referenzen auf Template-Elemente. shallowRef und shallowReactive dienen der Leistungsoptimierung. isRef und unref sind Hilfsfunktionen für Composables.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „ref() und reactive()“ kostenlos?
Ja — der vollständige Text von „ref() und reactive()“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „ref() und reactive()“?
Erstellen Sie mit ref() reaktive Primitive, umschließen Sie Objekte mit reactive() und verstehen Sie, wann welches Verfahren geeignet ist und wie Sie über .value auf ref-Werte zugreifen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „ref() und reactive()“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- ref() und reactive()
- computed() und watch()
- Die Funktion setup() und script setup
- Composables: wiederverwendbare Composition-Funktionen