onDestroy: sprzątanie
Wykonuj czynności kończące, takie jak czyszczenie timerów lub anulowanie subskrypcji, gdy komponent zostanie usunięty.
onDestroy: sprzątanie to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Dlaczego onDestroy
onDestroy uruchamia się, gdy komponent zostaje usunięty z DOM. Użyj go do usuwania nasłuchiwaczy, liczników czasu lub subskrypcji.
Importowanie i wywoływanie
Zaimportuj z svelte i przekaż funkcję zwrotną.
<script>
import { onDestroy } from "svelte";
onDestroy(() => console.log("bye"));
</script>Wzorzec czyszczenia
Anuluj liczniki czasu, przerwij żądania fetch i anuluj subskrypcje magazynów.
onDestroy(() => clearInterval(id));Wiele wywołań onDestroy
Wywołaj tyle razy, ile potrzeba. Każda funkcja czyszcząca zostanie uruchomiona.
Uruchamia się również na serwerze
W przeciwieństwie do onMount, onDestroy uruchamia się na serwerze podczas kończenia SSR.
Łączenie z onMount
Typowy wzorzec polega na skonfigurowaniu zasobów w onMount i usunięciu ich w onDestroy.
Lub po prostu zwróć funkcję z onMount
Zwrócenie funkcji z onMount jest równoważne użyciu onDestroy w przypadku prostego czyszczenia i pozwala umieścić powiązany kod w jednym miejscu.
Unikanie skutków ubocznych w destroy
Czyszczenie powinno być synchroniczne i szybkie. Długotrwałe operacje asynchroniczne mogą nie zakończyć się przed przejściem do innej strony.
Automatyczna subskrypcja magazynu
Jeśli używasz skróconej składni $store, Svelte automatycznie anuluje subskrypcję podczas niszczenia komponentu — nie trzeba ręcznie używać onDestroy.
Wycieki pamięci
Brak czyszczenia jest główną przyczyną wycieków pamięci w aplikacjach SPA. Zawsze usuwaj nasłuchiwacze dodane globalnie.
Strony a komponenty
Zmiana trasy niszczy komponenty strony, wywołując onDestroy. Można go również używać do sprzątania zasobów związanych z daną stroną.
Szybkie sprawdzenie
Jaki jest najprostszy sposób na powiązanie konfiguracji ze sprzątaniem?
Podsumowanie
onDestroy jest wywoływane, gdy komponent zostaje odmontowany. Należy używać go (lub wartości zwracanej przez onMount) do usuwania nasłuchiwaczy i timerów.
Często zadawane pytania
Czy lekcja „onDestroy: sprzątanie” jest bezpłatna?
Tak — pełny tekst „onDestroy: sprzątanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „onDestroy: sprzątanie”?
Wykonuj czynności kończące, takie jak czyszczenie timerów lub anulowanie subskrypcji, gdy komponent zostanie usunięty. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „onDestroy: sprzątanie”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- onMount: wykonywanie po renderowaniu
- onDestroy: sprzątanie
- beforeUpdate i afterUpdate
- tick(): oczekiwanie na aktualizacje DOM