Vue Academy · Lektion

onUpdated und onBeforeUpdate

Auf Änderungen reaktiver Daten reagieren, Endlosschleifen bei Updates in onUpdated vermeiden.

onUpdated und onBeforeUpdate ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Hooks rund um Aktualisierungen

Wenn sich reaktive Daten ändern, rendert Vue die Komponente neu. Zwei Hooks rahmen diesen Vorgang ein: onBeforeUpdate wird aufgerufen, bevor das DOM gepatcht wird, und onUpdated danach.

onUpdated: Nach dem Patch

onUpdated wird ausgeführt, sobald das DOM aktualisiert wurde und den neuen reaktiven Zustand widerspiegelt. Zu diesem Zeitpunkt entspricht das gerenderte DOM Ihren Daten.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Das aktualisierte DOM auslesen

Da der Patch abgeschlossen ist, ist onUpdated der richtige Ort, um neue Elementgrößen oder -positionen auszulesen, die vom letzten Rendern abhängen.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

Die Falle der Endlosschleife

Verändern Sie niemals den reaktiven Zustand innerhalb von onUpdated. Dadurch wird ein weiteres Rendern ausgelöst, das erneut onUpdated aufruft, woraufhin der Zustand wieder verändert wird — eine Endlosschleife, die die App einfriert.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Verwenden Sie stattdessen watch

Wenn Sie auf die Änderung eines bestimmten Werts reagieren möchten, verwenden Sie watch statt onUpdated. Ein Watcher überwacht eine einzelne Quelle und vermeidet das Risiko einer Endlosschleife, während onUpdated bei jedem Rendern ausgeführt wird.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: Vor dem Patch

onBeforeUpdate wird nach einer reaktiven Änderung, aber vor dem Patchen des DOMs durch Vue ausgeführt. Das DOM zeigt hier noch die alten Werte an.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Anwendungsfall: Snapshot vor der Aktualisierung

Da onBeforeUpdate das alte DOM sieht, eignet es sich perfekt, um vor der Änderung einen Snapshot zu erstellen — zum Beispiel, um die aktuelle Scrollposition zu speichern und nach der Aktualisierung wiederherzustellen.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Sie werden bei jedem Rendern ausgeführt

Beide Hooks werden bei jedem Aktualisierungszyklus ausgeführt, was häufig passieren kann. Halten Sie ihre Callbacks schlank, um Performanceprobleme zu vermeiden.

Nicht für datenbezogene Seiteneffekte

Bei diesen Hooks geht es um das DOM, nicht um Ihre Daten. Für datenabhängige Reaktionen verwenden Sie bevorzugt computed für abgeleitete Werte oder watch für Seiteneffekte bei bestimmten Quellen.

Zusammenfassung der Reihenfolge

Bei einer reaktiven Änderung ist die Reihenfolge: Der Zustand ändert sich, onBeforeUpdate wird ausgeführt (altes DOM), Vue patcht das DOM, anschließend wird onUpdated ausgeführt (neues DOM).

Zwischen den beiden Hooks wählen

onBeforeUpdate: Alten DOM-Zustand erfassen, etwa Scrollposition oder Auswahl.
onUpdated: Das neue DOM nach dem Patch auslesen — aber hier niemals den reaktiven Zustand verändern.

Kurzer Test

Testen Sie Ihr Wissen über Aktualisierungs-Hooks.

Zusammenfassung

Zusammenfassung der Aktualisierungs-Hooks:

onUpdated wird nach dem DOM-Patch ausgeführt — lesen Sie hier neue Größen aus.
Verändern Sie darin niemals den reaktiven Zustand (Endlosschleife); verwenden Sie stattdessen watch.
onBeforeUpdate wird vor dem Patch mit dem alten DOM ausgeführt — ideal für Snapshots.
Beide Hooks werden bei jedem Rendern ausgeführt. Halten Sie sie daher schlank.

Häufig gestellte Fragen

Ist die Lektion „onUpdated und onBeforeUpdate“ kostenlos?

Ja — der vollständige Text von „onUpdated und onBeforeUpdate“ 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 4 Lektionen.

Was lerne ich in „onUpdated und onBeforeUpdate“?

Auf Änderungen reaktiver Daten reagieren, Endlosschleifen bei Updates in onUpdated vermeiden. 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 4.

Wie lange dauert die Lektion „onUpdated und onBeforeUpdate“?

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