Grundlagen der Reaktivität
Lernen Sie, wie Vue reaktive Abhängigkeiten verfolgt
Grundlagen der Reaktivität ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Was ist Reaktivität?
Reaktivität bedeutet, dass Vue das DOM automatisch aktualisiert, wenn sich Ihre Daten ändern.
- Sie ändern einen Wert in JavaScript
- Vue erkennt die Änderung
- Die Ansicht wird passend neu gerendert
Eine manuelle DOM-Manipulation ist nicht erforderlich.
Wie Vue Abhängigkeiten nachverfolgt
Vue verwendet ein System zur Nachverfolgung von Abhängigkeiten.
- Wenn ein Render-Vorgang einen reaktiven Wert liest, erfasst Vue diese Abhängigkeit
- Wenn sich dieser Wert später ändert, weiß Vue, welche Render-Vorgänge erneut ausgeführt werden müssen
- Dadurch werden Aktualisierungen präzise und effizient
ref für primitive Werte
In der Composition API macht ref einen einzelnen Wert reaktiv.
import { ref } from "vue"
const count = ref(0)
const name = ref("Ada")
count.value++ // update via .value
console.log(name.value) // read via .valueref in Templates
In Templates werden Refs automatisch entpackt, sodass Sie .value weglassen können.
<script setup>
import { ref } from "vue"
const count = ref(0)
</script>
<template>
<p>{{ count }}</p>
<button @click="count++">Add</button>
</template>reactive für Objekte
reactive macht ein gesamtes Objekt reaktiv. Sie greifen direkt auf Eigenschaften zu, ohne .value.
import { reactive } from "vue"
const state = reactive({
count: 0,
user: { name: "Ada" }
})
state.count++
state.user.name = "Grace"ref oder reactive
So wählen Sie zwischen den beiden:
- ref funktioniert für jeden Wert (primitive Werte und Objekte) und wird mit .value verwendet
- reactive funktioniert nur für Objekte und wird direkt verwendet
Viele Teams bevorzugen aus Gründen der Einheitlichkeit ref überall.
Die data-Option (Vue 2 / Options API)
Die Options API verwendet die Funktion data. Jede zurückgegebene Eigenschaft ist reaktiv.
export default {
data() {
return {
count: 0,
items: []
}
},
methods: {
add() { this.count++ }
}
}Besonderheiten der Reaktivität bei Arrays
Eine direkte Zuweisung über einen Array-Index kann problematisch sein, insbesondere in Vue 2.
- In Vue 2 löste arr[5] = x keine Aktualisierungen aus
- Proxies in Vue 3 behandeln die meisten Fälle, dennoch ist Vorsicht sinnvoll
Bevorzugen Sie aus Gründen der Klarheit und Sicherheit Array-Methoden.
Reaktive Array-Methoden
Mutierende Methoden wie push, splice und pop werden reaktiv nachverfolgt.
const items = reactive([1, 2, 3])
items.push(4) // reactive
items.splice(0, 1) // reactive
// Replacing an index in Vue 3 proxy:
items[0] = 99 // works in Vue 3Ersetzen oder Mutieren
Arrays können auf zwei Arten aktualisiert werden:
- Mutieren mit push, splice und sort
- Ersetzen durch Zuweisen eines neuen Arrays, beispielsweise aus filter oder map
Beides löst in Vue 3 Reaktivität aus. Bei abgeleiteten Listen ist das Ersetzen oft übersichtlicher.
// Mutate
state.list.push(item)
// Replace with a filtered copy
state.list = state.list.filter(x => x.active)Verlust der Reaktivität vermeiden
Das Destrukturieren eines reaktiven Objekts unterbricht die Reaktivität dieser Variablen.
- Beim Herauslösen einer Eigenschaft wird ihr aktueller Wert kopiert
- Verwenden Sie toRefs, um die Reaktivität beim Destrukturieren zu erhalten
import { reactive, toRefs } from "vue"
const state = reactive({ count: 0 })
// Keeps reactivity
const { count } = toRefs(state)Kurztest
Testen Sie Ihr Verständnis der Reaktivität in Vue.
Zusammenfassung: Grundlagen der Reaktivität
Sie haben gelernt, wie die Reaktivität in Vue funktioniert:
- Vue verfolgt, welche Daten jeder Render-Vorgang verwendet
- ref macht Werte reaktiv (verwenden Sie .value in JS)
- reactive macht Objekte reaktiv (direkter Zugriff)
- Die Options API verwendet die Funktion data
- Verwenden Sie Array-Methoden und toRefs, um den Verlust der Reaktivität zu vermeiden
Als Nächstes: berechnete Eigenschaften.
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
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Grundlagen der Reaktivität“ kostenlos?
Ja — der vollständige Text von „Grundlagen der Reaktivität“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Grundlagen der Reaktivität“?
Lernen Sie, wie Vue reaktive Abhängigkeiten verfolgt Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 3.
Wie lange dauert die Lektion „Grundlagen der Reaktivität“?
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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- Grundlagen der Reaktivität
- Berechnete Eigenschaften
- Watcher und tiefe Reaktivität