onDestroy: Aufräumen
Führen Sie beim Entfernen der Komponente Aufräumlogik aus, etwa zum Löschen von Timern oder Beenden von Abonnements.
onDestroy: Aufräumen ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Warum onDestroy
onDestroy wird ausgeführt, wenn eine Komponente aus dem DOM entfernt wird. Verwenden Sie es, um Listener, Timer oder Abonnements zu bereinigen.
Importieren und aufrufen
Importieren Sie es aus svelte und übergeben Sie einen Callback.
<script>
import { onDestroy } from "svelte";
onDestroy(() => console.log("bye"));
</script>Bereinigungsmuster
Brechen Sie Timer ab, brechen Sie Fetches ab und beenden Sie Store-Abonnements.
onDestroy(() => clearInterval(id));Mehrere onDestroy-Aufrufe
Rufen Sie es so oft wie nötig auf. Jede Bereinigung wird ausgeführt.
Wird auch auf dem Server ausgeführt
Im Gegensatz zu onMount wird onDestroy während des SSR-Abbaus auf dem Server ausgeführt.
Mit onMount kombinieren
Ein gängiges Muster besteht darin, in onMount etwas einzurichten und es in onDestroy wieder abzubauen.
Oder einfach aus onMount zurückgeben
Das Zurückgeben einer Funktion aus onMount entspricht für einfache Bereinigungen onDestroy und hält den zugehörigen Code zusammen.
Nebeneffekte in destroy vermeiden
Halten Sie die Bereinigung synchron und kurz. Aufwendige asynchrone Arbeit wird möglicherweise vor der Navigation nicht abgeschlossen.
Automatisches Store-Abonnement
Wenn Sie die Kurzschreibweise $store verwenden, beendet Svelte das Abonnement beim Zerstören automatisch. Ein manuelles onDestroy ist nicht erforderlich.
Speicherlecks
Vergessene Bereinigungen sind die häufigste Ursache für Speicherlecks in SPAs. Entfernen Sie global hinzugefügte Listener immer wieder.
Seiten vs. Komponenten
Bei Routenänderungen werden Seitenkomponenten zerstört, wodurch onDestroy ausgelöst wird. Verwenden Sie es auch für die seitenbezogene Bereinigung.
Kurzer Test
Wie lassen sich Setup und Teardown am einfachsten miteinander verknüpfen?
Zusammenfassung
onDestroy wird ausgeführt, wenn die Komponente ausgehängt wird. Verwenden Sie es (oder den Rückgabewert von onMount), um Listener und Timer zu bereinigen.
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
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „onDestroy: Aufräumen“ kostenlos?
Ja — der vollständige Text von „onDestroy: Aufräumen“ 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 „onDestroy: Aufräumen“?
Führen Sie beim Entfernen der Komponente Aufräumlogik aus, etwa zum Löschen von Timern oder Beenden von Abonnements. 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 2 von 4.
Wie lange dauert die Lektion „onDestroy: Aufräumen“?
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