Vue Academy · Lekcja

onUnmounted i wzorce sprzątania

Czyszczenie interwałów, usuwanie nasłuchiwaczy zdarzeń, anulowanie żądań w onUnmounted.

Lekcja 4 z 413 kroki

onUnmounted i wzorce sprzątania to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Sprzątanie po sobie

Gdy komponent zostaje usunięty, wszystko, co uruchomił — timery, nasłuchiwacze, subskrypcje i żądania sieciowe — nadal działa, chyba że zostanie zatrzymane. Hook onUnmounted służy do sprzątania, które zapobiega wyciekom pamięci i błędom.

Hook onUnmounted

onUnmounted jest wywoływany po usunięciu komponentu z DOM. To ostatnia szansa na zwolnienie zasobów.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

Wzorzec: czyszczenie interwałów

Jeśli interwał zostanie uruchomiony w onMounted, należy wyczyścić go w onUnmounted. W przeciwnym razie funkcja zwrotna będzie wykonywana po usunięciu komponentu, często powodując awarię z powodu braku stanu.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Wzorzec: usuwanie nasłuchiwaczy zdarzeń

Globalne nasłuchiwacze na window lub document pozostają aktywne po usunięciu komponentu. Należy zawsze łączyć addEventListener z removeEventListener.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

Wzorzec: przerywanie żądań fetch

Oczekujące żądanie, które zakończy się po odmontowaniu komponentu, może ustawić stan usuniętego komponentu. Należy użyć AbortController, aby anulować żądanie podczas sprzątania.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

Wzorzec: anulowanie subskrypcji

Subskrypcje magazynów, gniazd lub magistral zdarzeń muszą być usuwane. Należy zapisać funkcję anulującą subskrypcję i wywołać ją w onUnmounted.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch zwraca funkcję zatrzymującą

Wywołanie watch zwraca funkcję, która go zatrzymuje. Obserwatory utworzone podczas konfiguracji zatrzymują się automatycznie, ale obserwatory utworzone później (na przykład wewnątrz innej funkcji zwrotnej) należy zatrzymać ręcznie.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

Funkcja sprzątająca watchEffect

Wewnątrz watchEffect otrzymują Państwo funkcję onCleanup, która służy do sprzątania przed następnym wykonaniem lub po zatrzymaniu obserwatora. Dzięki temu zasoby tworzone przy każdym wykonaniu pozostają uporządkowane.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

Dlaczego sprzątanie ma znaczenie

Pominięcie sprzątania prowadzi do wycieków pamięci (zasoby nigdy nie są zwalniane), zduplikowanych nasłuchiwaczy (przy kolejnych montowaniach gromadzi się ich coraz więcej) oraz błędów (funkcje zwrotne próbują korzystać ze zniszczonego stanu). Dobry kod zawsze usuwa to, co wcześniej utworzył.

Composables robią to automatycznie

Dobrze napisane composables rejestrują własne sprzątanie w onUnmounted. Dlatego composables VueUse, takie jak useEventListener, usuwają nasłuchiwacz za Państwa — sprzątanie jest w nich wbudowane.

Lista kontrolna sprzątania

setInterval/setTimeout -> należy je wyczyścić.
addEventListener -> należy go usunąć.
fetch -> należy przerwać za pomocą AbortController.
subskrypcje -> należy wywołać funkcję anulowania subskrypcji.
obserwatory tworzone ręcznie -> należy wywołać zwróconą funkcję zatrzymującą.

Szybki test

Proszę sprawdzić swoją wiedzę na temat sprzątania.

Odpowiedz w interaktywnej lekcji

Podsumowanie

Najważniejsze informacje o sprzątaniu:

onUnmounted wykonuje się po usunięciu komponentu — tutaj należy zwalniać zasoby.
Należy czyścić interwały i timery, usuwać nasłuchiwacze, przerywać żądania fetch i anulować subskrypcje.
watch zwraca funkcję zatrzymującą, którą w razie potrzeby należy wywołać w onUnmounted.
watchEffect udostępnia funkcję zwrotną onCleanup do sprzątania przy każdym wykonaniu.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 42
Lekcje: 156

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „onUnmounted i wzorce sprzątania” jest bezpłatna?

Tak — pełny tekst „onUnmounted i wzorce sprzątania” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „onUnmounted i wzorce sprzątania”?

Czyszczenie interwałów, usuwanie nasłuchiwaczy zdarzeń, anulowanie żądań w onUnmounted. Ćwiczysz Vue 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ąć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue 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 4 z 4.

Ile czasu zajmuje lekcja „onUnmounted i wzorce sprzątania”?

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 Vue Academy?

Tak. Każda lekcja Vue 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

← Powrót do Vue Academy