Aus dem Kurs: Vue.js Grundkurs

watch() und watchEffect() – Tutorial zu Vue.js

Aus dem Kurs: Vue.js Grundkurs

Gratismonat starten Für Ihr Team erwerben

watch() und watchEffect()

“

Für Seiteneffekte als Reaktion auf Zustandsänderung können Sie watch() verwenden. Wie funktioniert das? An watch() übergeben Sie zuerst den Zustand, den Sie beobachten wollen. Und als zweiten Parameter geben Sie dann eine Callback-Funktion an, und die wird ausgelöst, sobald sich ein Teil des reaktiven Zustands ändert und in der Callback-Funktion haben Sie zwei Parameter, nämlich den neuen Wert und den alten Wert. Außerdem gibt es verschiedene Optionen, die Sie definieren können. Sie können mit (deep: true) zusätzlich festlegen, dass auch tiefere Mutationen berücksichtigt werden. Und die Option (immediate: true) bedeutet, dass die Callback-Funktion direkt ausgeführt wird, auch wenn es noch keine Zustandsänderung gegeben hat. Wenn Sie watch() stoppen wollen, dann müssen Sie die Handler-Funktion, die zurückgegeben wird, aufrufen. Neben watch() gibt es auch watchEffect(). Das wird direkt ausgeführt, und da müssen Sie die Datenquelle nicht direkt angeben. Dabei werden einfach alle Datenquellen überwacht, die in der Callback-Funktion verwendet werden und Sie haben dabei nicht den ursprünglichen Wert. Sehen wir uns ein Beispiel für watch() an. Das Beispiel hilft Ihnen, wichtige Entscheidungen zu treffen. Ich teste einmal: "Soll ich joggen gehen?" "nein", okay. "Soll ich überhaupt Sport machen?" "nein", ok. Also heute muss ich keinen Sport machen. Wir haben ein kleines Beispiel, wo immer "ja" oder "nein" ausgegeben wird, und das wird von einer API abgefragt. So, das Entscheidende ist mein Inputfeld, wo ich eben meine Frage angeben kann, und außerdem gibt es eine Antwort. Wenn ich watch benutzen möchte, muss ich die Hilfsfunktion importieren. Und dann habe ich zum einen die Frage und ich habe die Antwort. Bei watch() gebe ich dann an, auf was geschaut werden soll, eben wenn die Frage sich ändert, und dann kommt die Funktion, die aufgerufen wird. Da wird geschaut, ob es in der Frage auch ein Fragezeichen gibt. Und dann wird versucht, diese api aufzurufen, und die gibt mir dann entweder "no" oder "yes" zurück, und ich habe das an dieser Stelle noch eingedeutscht. Und außerdem gibt es einen catch-Block, falls es Fehler gegeben hat. Das Entscheidende ist aber diese watch-Funktion, die eben darauf reagiert, dass sich bei dieser Stelle etwas ändert.

Inhalt