Svelte Lifecycle

6 Kernkonzepte

Die wichtigsten Lifecycle-Funktionen in Svelte: onMount · onDestroy · beforeUpdate · afterUpdate · tick · setContext / getContext Lifecycle-Funktionen ermöglichen es Ihnen, Code zu bestimmten Zeitpunkten im Lebenszyklus einer Komponente auszuführen – beim Mounten, bei Updates und beim Zerstören. Sie sind essenziell für API-Aufrufe, DOM-Manipulationen und die Ressourcenverwaltung.

onMount – Nach dem ersten Rendering

onMount(callback) · onMount(() => () => cleanup)

import { onMount } from 'svelte'; onMount(() => { console.log("Komponente gemountet"); return () => console.log("Cleanup"); });

onMount wird einmal nach dem ersten Rendering der Komponente aufgerufen – ideal für API-Aufrufe, DOM-Manipulationen oder das Setzen von Intervallen. Die zurückgegebene Funktion wird beim Zerstören der Komponente ausgeführt.

Wichtige Eigenschaften

Merkmal	Beschreibung
Wird nur im Browser ausgeführt	Keine Ausführung auf dem Server (SSR)
Cleanup-Funktion	Optionaler Rückgabewert für Aufräumarbeiten
Asynchrone Ausführung	onMount kann async sein (z.B. für API-Calls)
Einmalige Ausführung	Wird nur einmal pro Komponenteninstanz aufgerufen

Beispiele

import { onMount } from 'svelte';

// Einfacher onMount

onMount(() => {

console.log("Komponente wurde gemountet");

});

// Mit Cleanup-Funktion (z.B. für Intervalle)

let interval;

onMount(() => {

interval = setInterval(() => {

console.log("Tick");

}, 1000);

return () => {

clearInterval(interval);

console.log("Interval bereinigt");

};

});

// Async (API-Aufruf)

let data = [];

onMount(async () => {

const response = await fetch('https://api.example.com/data');

data = await response.json();

});

</script>

{#each data as item}

{/each}

Tipp: Die Cleanup-Funktion wird aufgerufen, wenn die Komponente zerstört wird – ideal für das Entfernen von Event-Listenern, das Stoppen von Intervallen oder das Schließen von Verbindungen.

onDestroy – Beim Zerstören der Komponente

onDestroy(callback)

import { onDestroy } from 'svelte'; onDestroy(() => { console.log("Komponente wird zerstört"); });

onDestroy wird direkt vor dem Zerstören der Komponente aufgerufen – analog zur Cleanup-Funktion von onMount, aber auch verfügbar, wenn onMount nicht verwendet wird.

Beispiele

import { onDestroy } from 'svelte';

// Event-Listener entfernen

let element;

function handleScroll() {

console.log("Scroll");

}

onDestroy(() => {

window.removeEventListener('scroll', handleScroll);

console.log("Event-Listener entfernt");

});

// vs. Cleanup in onMount

onMount(() => {

window.addEventListener('scroll', handleScroll);

return () => {

window.removeEventListener('scroll', handleScroll);

};

});

</script>

Tipp: onDestroy kann auch ohne onMount verwendet werden – z.B. wenn Sie einen Event-Listener außerhalb der Komponente registrieren müssen.

beforeUpdate / afterUpdate – Vor und nach DOM-Updates

beforeUpdate(callback) · afterUpdate(callback)

import { beforeUpdate, afterUpdate } from 'svelte'; beforeUpdate(() => { // Vor dem DOM-Update }); afterUpdate(() => { // Nach dem DOM-Update });

beforeUpdate wird unmittelbar vor jeder Aktualisierung des DOMs aufgerufen – afterUpdate direkt danach. Diese Hooks ermöglichen es, auf DOM-Änderungen zu reagieren.

Wichtige Eigenschaften

Merkmal	beforeUpdate	afterUpdate
Zeitpunkt	Vor DOM-Update	Nach DOM-Update
Zugriff auf DOM	Alter Zustand	Aktualisierter Zustand
Ausführungshäufigkeit	Bei jedem Update	Bei jedem Update
Vorsicht	Kann Endlosschleifen verursachen	Kann Endlosschleifen verursachen

Beispiele

import { beforeUpdate, afterUpdate } from 'svelte';

let count = 0;

let element;

// Vor dem Update

beforeUpdate(() => {

console.log(`Vor Update: ${count}`);

if (element) {

console.log(`DOM-Text vorher: ${element.textContent}`);

}

});

// Nach dem Update

afterUpdate(() => {

console.log(`Nach Update: ${count}`);

if (element) {

console.log(`DOM-Text nachher: ${element.textContent}`);

}

});

// Beispiel: Scroll-Position speichern/wiederherstellen

let scrollPos;

beforeUpdate(() => {

scrollPos = window.scrollY;

});

afterUpdate(() => {

window.scrollTo(0, scrollPos);

});

</script>

<button on:click={() => count++}>Increment</button>

<p bind:this={ element }>Count: { count }</p>

Tipp: beforeUpdate und afterUpdate sollten nicht für Zustandsänderungen verwendet werden, die zu erneuten Updates führen – das kann Endlosschleifen verursachen.

tick – Auf DOM-Update warten

await tick()

import { tick } from 'svelte'; async function handleClick() { count++; await tick(); console.log("DOM wurde aktualisiert"); }

tick() ist eine asynchrone Funktion, die einen Promise zurückgibt, der aufgelöst wird, sobald alle ausstehenden DOM-Updates abgeschlossen sind – ähnlich wie nextTick in Vue oder setTimeout(..., 0).

Beispiele

import { tick } from 'svelte';

let count = 0;

let element;

// tick() verwenden, um auf DOM-Änderungen zu warten

async function increment() {

count += 1;

await tick();

console.log(`DOM-Text: ${element.textContent}`);

// Jetzt ist das DOM aktualisiert

element.scrollIntoView();

}

// tick() in Kombination mit onMount

onMount(async () => {

await tick();

console.log("DOM vollständig gerendert");

// Hier kann sicher auf DOM-Elemente zugegriffen werden

if (element) {

element.focus();

}

});

// tick() für Animationen

async function animate() {

show = true;

await tick();

// DOM aktualisiert – jetzt kann animiert werden

element.classList.add('visible');

}

</script>

<button on:click={ increment }>Increment</button>

<p bind:this={ element }>Count: { count }</p>

Tipp: tick() ist besonders nützlich, wenn Sie nach einer Zustandsänderung auf das aktualisierte DOM zugreifen müssen – z.B. für Fokus, Scrollpositionen oder Animationen.

Fortgeschrittene Konzepte – setContext, getContext, SSR

setContext · getContext · hasContext

// Elternkomponente import { setContext } from 'svelte'; setContext('key', 'value'); // Kindkomponente import { getContext } from 'svelte'; const value = getContext('key');

Context ermöglicht die Weitergabe von Daten über mehrere Komponentenebenen hinweg – ohne Props durch jede Zwischenkomponente zu leiten (Prop Drilling).

Beispiele

import { setContext } from 'svelte';

import Child from './Child.svelte';

import { writable } from 'svelte/store';

// Store im Context setzen

const user = writable({ name: "Anna" });

setContext('user', user);

</script>

import { getContext } from 'svelte';

const user = getContext('user');

// Reaktiv auf Context zugreifen

$: userName = $user.name;

</script>

<p>Benutzer: { $user.name }</p>

<button on:click={() => $user.name = "Max"}>Ändern</button>

// hasContext – prüfen, ob Context existiert

import { hasContext } from 'svelte';

if (hasContext('user')) {

console.log("Context existiert");

}

Tipp: Context ist nicht reaktiv von sich aus – verwenden Sie Stores im Context, um reaktive Daten zu teilen. Context ist ideal für Thema, Sprach-Einstellungen oder Benutzerinformationen.

Svelte Lifecycle im Überblick

onMount Nach erstem Rendering
API, DOM, Intervalle

onDestroy Beim Zerstören
Cleanup, Listener entfernen

beforeUpdate Vor DOM-Update
Alten Zustand speichern

afterUpdate Nach DOM-Update
Auf Änderungen reagieren

tick Auf DOM-Update warten
Async-Abfragen

Context Daten über Ebenen teilen
setContext, getContext

Quick Summary

onMount

Nach Rendering

onDestroy

Beim Zerstören

beforeUpdate

Vor DOM-Update

afterUpdate

Nach DOM-Update

tick

Auf DOM warten

Context

Daten teilen

onMount(() => { ... }) · await tick() · setContext('key', value)