Sveltejs Academy · Lektion

onMount: körning efter rendering

Kör kod efter att komponenten har lagts till i DOM:en.

Lektion 1 av 413 steg

onMount: körning efter rendering är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Syftet med onMount

onMount körs efter att komponenten har lagts till i DOM. Det passar bra för att starta asynkront arbete eller komma åt referenser.

Importera det

Importera från svelte högst upp i skriptet.

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

Grundläggande användning

Skicka en funktion som körs en gång när komponenten monteras.

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

Asynkrona operationer

Ni kan använda async/await inuti funktionen eller returnera ett promise.

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

Komma åt element

Kombinera med bind:this för att manipulera DOM direkt efter montering.

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

Rensningsfunktion

Returnera en funktion från onMount för att rensa upp när komponenten avmonteras.

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

Server kontra webbläsare

onMount körs inte under SSR. Använd det för webbläsarspecifik kod som konfiguration av canvas eller WebGL.

Flera onMount-anrop

Ni kan anropa onMount flera gånger i samma komponent. De körs i deklarationsordning.

Prenumerationer

Prenumerera på externa källor här och avsluta prenumerationerna i den returnerade rensningsfunktionen.

Undvik tungt arbete

Skjut upp icke-kritiskt arbete eller använd requestIdleCallback för att undvika att blockera den första renderingen.

Skillnad mot beforeUpdate

onMount körs exakt en gång, medan beforeUpdate körs före varje reaktiv uppdatering.

Snabb kontroll

Hur rensar ni upp ett intervall som startats i onMount?

Besvara frågan i den interaktiva lektionen

Sammanfattning

onMount körs en gång efter montering. Returnera en funktion för att hantera rensning. Det körs aldrig på servern.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”onMount: körning efter rendering” gratis?

Ja – hela texten till ”onMount: körning efter rendering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”onMount: körning efter rendering”?

Kör kod efter att komponenten har lagts till i DOM:en. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”onMount: körning efter rendering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Sveltejs Academy