beforeUpdate und afterUpdate
Binden Sie sich in den Aktualisierungszyklus ein, um das DOM vor und nach reaktiven Änderungen zu untersuchen oder zu verändern.
beforeUpdate und afterUpdate ist eine kostenlose Sveltejs 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Wann sie ausgeführt werden
beforeUpdate wird ausgeführt, bevor reaktive Aktualisierungen in den DOM übernommen werden; afterUpdate wird unmittelbar danach ausgeführt.
Anwendungsfälle
Verwenden Sie sie, um DOM-Messwerte vor Änderungen auszulesen und die Scrollposition anschließend anzupassen.
Automatisches Scrollen im Chat
Ein typischer Anwendungsfall ist, einen Chat nur dann automatisch nach unten zu scrollen, wenn sich der Benutzer bereits am unteren Ende befand.
let div, autoscroll;
beforeUpdate(() => {
autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
if (autoscroll) div.scrollTo(0, div.scrollHeight);
});Häufige Ausführung
Diese Callbacks werden bei jeder Aktualisierung ausgeführt. Halten Sie sie schnell.
Verhalten auf dem Server
Während SSR werden sie nicht ausgeführt. Behandeln Sie sie als ausschließlich browserseitig.
Sorgfältig kombinieren
In beforeUpdate gespeicherter Zustand kann in afterUpdate angewendet werden, um Muster zum Messen und Anwenden umzusetzen.
Für die meiste Logik vermeiden
Die meiste Logik gehört in reaktive Anweisungen oder Actions. Verwenden Sie diese Funktionen nur zum Messen des DOM.
Ausführungsreihenfolge
Reihenfolge pro Aktualisierung: reaktive Anweisungen -> beforeUpdate -> DOM-Patch -> afterUpdate.
Erstes Mounten
Beide Funktionen werden zusätzlich zu nachfolgenden Aktualisierungen auch beim ersten Mounten ausgeführt. Berücksichtigen Sie diese erste Ausführung.
Mit bind:this kombinieren
Zum Messen benötigen Sie eine Referenz auf das DOM-Element. Verwenden Sie bind:this.
Alternative mit tick
Für einmalige Messungen nach einer Änderung kann await tick() besser lesbar sein.
Kurzer Test
Wann wird afterUpdate ausgeführt?
Zusammenfassung
beforeUpdate erfasst den Zustand vor der Änderung; afterUpdate liest den gerade aktualisierten DOM aus oder verändert ihn.
Häufig gestellte Fragen
Ist die Lektion „beforeUpdate und afterUpdate“ kostenlos?
Ja — der vollständige Text von „beforeUpdate und afterUpdate“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „beforeUpdate und afterUpdate“?
Binden Sie sich in den Aktualisierungszyklus ein, um das DOM vor und nach reaktiven Änderungen zu untersuchen oder zu verändern. Du übst Sveltejs 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 Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs 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 „beforeUpdate und afterUpdate“?
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 Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs 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
- onMount: Ausführung nach dem Rendern
- onDestroy: Aufräumen
- beforeUpdate und afterUpdate
- tick(): Auf DOM-Aktualisierungen warten