0Pricing
Sveltejs Academy · Lekcja

onMount: wykonywanie po renderowaniu

Wykonuj kod po dodaniu komponentu do DOM.

onMount: wykonywanie po renderowaniu to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 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.

Cel onMount

onMount uruchamia się po dodaniu komponentu do DOM. Doskonale nadaje się do rozpoczęcia operacji asynchronicznych lub uzyskania dostępu do odwołań.

Importowanie

Zaimportuj z svelte na początku skryptu.

<script>
  import { onMount } from "svelte";
</script>

Podstawowe użycie

Przekaż funkcję, która uruchomi się raz po zamontowaniu.

onMount(() => {
  console.log("mounted");
});

Operacje asynchroniczne

Wewnątrz można używać async/await lub zwrócić obietnicę.

onMount(async () => {
  data = await fetch("/api").then(r => r.json());
});

Dostęp do elementu

Połącz z bind:this, aby manipulować DOM bezpośrednio po zamontowaniu.

onMount(() => inputEl.focus());

Funkcja czyszcząca

Zwróć funkcję z onMount, aby wykonać czyszczenie podczas odmontowywania komponentu.

onMount(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
});

Serwer a przeglądarka

onMount nie uruchamia się podczas SSR. Używaj go w kodzie przeznaczonym wyłącznie dla przeglądarki, na przykład przy konfiguracji canvas lub WebGL.

Wiele wywołań onMount

W jednym komponencie można wywołać onMount wiele razy. Wywołania są wykonywane w kolejności deklaracji.

Subskrypcje

W tym miejscu zasubskrybuj zewnętrzne źródła, a anulowanie subskrypcji wykonaj w zwracanej funkcji czyszczącej.

Unikanie kosztownych operacji

Odłóż operacje niekrytyczne lub użyj requestIdleCallback, aby uniknąć blokowania pierwszego renderowania.

Różnica w porównaniu z beforeUpdate

onMount uruchamia się dokładnie raz, natomiast beforeUpdate uruchamia się przed każdą aktualizacją reaktywną.

Szybkie sprawdzenie

Jak wykonać czyszczenie interwału uruchomionego w onMount?

Podsumowanie

onMount uruchamia się raz po zamontowaniu; zwróć funkcję, aby obsłużyć czyszczenie; nigdy nie uruchamia się na serwerze.

Często zadawane pytania

Czy lekcja „onMount: wykonywanie po renderowaniu” jest bezpłatna?

Tak — pełny tekst „onMount: wykonywanie po renderowaniu” 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 „onMount: wykonywanie po renderowaniu”?

Wykonuj kod po dodaniu komponentu do DOM. Ć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 1 z 4.

Ile czasu zajmuje lekcja „onMount: wykonywanie po renderowaniu”?

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

  1. onMount: wykonywanie po renderowaniu
  2. onDestroy: sprzątanie
  3. beforeUpdate i afterUpdate
  4. tick(): oczekiwanie na aktualizacje DOM
← Powrót do Sveltejs Academy