Vue Academy · Lektion

Watcher und tiefe Reaktivität

Reagieren Sie mit Watchern und tiefem Watching auf Datenänderungen

Watcher und tiefe Reaktivität ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 ein Watcher?

Ein Watcher führt als Reaktion auf eine Datenänderung eine Funktion aus.

Im Gegensatz zu computed dient er Seiteneffekten
Daten abrufen, protokollieren und im Speicher ablegen
Sie reagieren, wenn sich etwas Bestimmtes ändert

Die Funktion watch

Die Funktion watch erwartet eine zu überwachende Quelle und einen Callback, der neue und alte Werte erhält.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

Ein praktisches Beispiel

Ein Suchfeld überwachen, um bei einer Änderung einen API-Aufruf auszulösen.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

Die Option immediate

Standardmäßig wird ein Watcher nur bei Änderungen ausgelöst. Die Option immediate führt ihn zusätzlich sofort einmal aus.

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

Die Option deep

Das Überwachen eines Objekts reagiert standardmäßig nur auf Änderungen seiner Referenz. Die Option deep überwacht auch verschachtelte Eigenschaften.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

Verschachtelte Objekte überwachen

Ohne deep löst eine Änderung einer verschachtelten Eigenschaft eines überwachten reaktiven Objekts den Callback möglicherweise nicht wie erwartet aus. deep stellt dies sicher, verursacht jedoch zusätzlichen Aufwand.

Verwenden Sie deep nur, wenn Sie die Überwachung verschachtelter Werte wirklich benötigen
Das Überwachen großer Objekte mit deep kann aufwendig sein

Einen Getter überwachen

Um einen bestimmten verschachtelten Wert zu überwachen, übergeben Sie eine Getter-Funktion als Quelle.

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

Mehrere Quellen überwachen

Übergeben Sie ein Array von Quellen, um mehrere Werte gleichzeitig zu überwachen.

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffect wird sofort ausgeführt und erneut ausgeführt, sobald sich ein reaktiver Wert ändert, den die Funktion liest. Eine explizite Liste von Quellen ist nicht erforderlich.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

watch und watchEffect

So treffen Sie die Auswahl:

watch verwendet eine explizite Quelle, liefert alte und neue Werte und ist standardmäßig verzögert
watchEffect verfolgt Abhängigkeiten automatisch, wird sofort ausgeführt und liefert keinen alten Wert

Verwenden Sie watch, wenn Sie den vorherigen Wert oder eine präzise Kontrolle benötigen, und watchEffect, wenn es vor allem bequem sein soll.

Watcher in der Options API

In der Options API werden Watcher in einem watch-Block deklariert, dessen Schlüssel dem Namen der Daten entspricht.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

Kurzer Test

Testen Sie Ihr Verständnis von Watchern.

Zusammenfassung: Watcher und tiefe Reaktivität

Sie haben gelernt, mit Seiteneffekten auf Änderungen zu reagieren:

watch überwacht eine Quelle und liefert neue und alte Werte
immediate führt die Funktion zu Beginn einmal aus
deep verfolgt Änderungen in verschachtelten Objekten
watchEffect verfolgt Abhängigkeiten automatisch und wird sofort ausgeführt
Überwachen Sie mehrere Quellen mit einem Array

Als Nächstes: Routing mit Vue Router.

Häufig gestellte Fragen

Ist die Lektion „Watcher und tiefe Reaktivität“ kostenlos?

Ja — der vollständige Text von „Watcher und tiefe 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 „Watcher und tiefe Reaktivität“?

Reagieren Sie mit Watchern und tiefem Watching auf Datenänderungen 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 3 von 3.

Wie lange dauert die Lektion „Watcher und tiefe 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

← Zurück zu Vue Academy