Svelte Grundlagen

6 Kernkonzepte

Die wichtigsten Svelte-Konzepte für reaktive Webanwendungen: Komponenten · Reaktivität · Props · Bindings · Stores · Lifecycle Svelte ist ein modernes UI-Framework, das zur Compile-Zeit arbeitet – im Gegensatz zu anderen Frameworks wird kein virtuelles DOM verwendet. Diese Cheatsheet fasst die grundlegenden Konzepte zusammen.

Komponenten – Die Grundbausteine

.svelte · <script> · <style>

<script> let name = "Welt"; </script> <h1>Hallo {name}!</h1> <style> h1 { color: #ff3e00; } </style>

Svelte-Komponenten sind Svelte-Dateien (.svelte), die HTML, CSS und JavaScript in einer Datei vereinen. Jede Datei definiert eine Komponente.

Beispiele

export let label = "Klick mich";

export let primary = false;

</script>

{ label }

</button>

<style>

button { padding: 8px 16px; border-radius: 4px; }

button.primary { background: #ff3e00; color: white; }

</style>

Tipp: CSS in <style> ist automatisch komponenten-scoped – es wird nur auf die aktuelle Komponente angewendet. Verwenden Sie :global() für globale Styles.

Reaktivität – Automatische Aktualisierung

let · $: · reactive statements

let count = 0; $: doubled = count * 2; // Reaktiv $: console.log(`Count: ${count}`); function increment() { count++; }

Reaktivität ist das Herz von Svelte. Wenn sich eine Variable ändert, werden alle abhängigen Ausdrücke und das DOM automatisch aktualisiert. Die $:-Syntax markiert reaktive Anweisungen.

Beispiele

let count = 0;

// Reaktive Abhängigkeit

$: doubled = count * 2;

// Reaktive Anweisung (Block)

$: if (count > 10) {

console.log("Zähler über 10!");

}

function increment() {

count += 1;

}

function reset() {

count = 0;

}

</script>

Count: { count } (doubled: { doubled })

</button>

<button on:click={ reset }>Reset</button>

Tipp: Alle Variablen, die im <script>-Block deklariert werden, sind automatisch reaktiv. Verwenden Sie $: für abgeleitete Werte und Seiteneffekte.

Props – Daten an Komponenten übergeben

export let · $$props · $$restProps

// Child.svelte <script> export let name; export let age = 0; // Default-Wert </script> <p>Name: { name }, Alter: { age }</p>

Props werden mit export let in der Child-Komponente deklariert und beim Einbinden über Attribute übergeben.

Beispiele

import Child from './Child.svelte';

let userName = "Anna";

</script>

export let name;

export let age = 0;

export let className; // Explizit deklariert

$: rest = $$restProps; // Alle anderen Props

</script>

Name: { name }, Alter: { age }

</div>

Tipp: Verwenden Sie $$restProps für die Weitergabe von Attributen an untergeordnete Elemente (ähnlich wie {...props} in React).

Bindings – bidirektionale Datenbindung

bind:value · bind:group · bind:this

let name = ""; <input bind:value={ name } /> <p>Hallo { name }!</p>

Bindings ermöglichen eine bidirektionale Datenbindung zwischen DOM-Elementen und Variablen – ähnlich wie v-model in Vue oder ngModel in Angular.

Beispiele

let text = "";

let checked = false;

let selected = "option2";

<option value="option1">Option 1</option>

<option value="option2">Option 2</option>

<option value="option3">Option 3</option>

</select>

let inputElement;

$: if (inputElement) inputElement.focus();

Tipp: bind:this gibt Ihnen eine direkte Referenz auf das DOM-Element – nützlich für imperative Operationen wie Fokus oder Animationen.

Stores – Globaler Zustand

writable · readable · derived · $store

// store.js import { writable } from 'svelte/store'; export const count = writable(0); // In Komponente import { count } from './store.js'; $: console.log($count);

Stores sind der eingebaute Zustandsmanager von Svelte. Sie ermöglichen die gemeinsame Nutzung von reaktiven Daten über mehrere Komponenten hinweg. Mit dem $-Präfix wird automatisch auf den aktuellen Wert zugegriffen.

Beispiele

// store.js

import { writable, readable, derived } from 'svelte/store';

export const user = writable({ name: "Anna", loggedIn: true });

// Readable Store (nur lesbar)

export const time = readable(new Date(), (set) => {

const interval = setInterval(() => {

set(new Date());

}, 1000);

return () => clearInterval(interval);

});

// Derived Store (abgeleitet)

export const userName = derived(user, $user => $user.name);

// In Komponente

import { user, userName, time } from './store.js';

// Aktualisieren

function login() {

user.set({ name: "Max", loggedIn: true });

}

function logout() {

user.update(u => ({ ...u, loggedIn: false }));

}

</script>

<p>Name: { $userName }</p>

<p>Zeit: { $time.toLocaleTimeString() }</p>

Tipp: Das $-Präfix ist ein syntaktischer Zucker – es macht den Store-Wert reaktiv. Sie können auch store.subscribe() manuell verwenden.

Lifecycle – Komponenten-Lebenszyklus

onMount · onDestroy · beforeUpdate · afterUpdate

import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'; onMount(() => { console.log("Komponente gemountet"); return () => console.log("Aufräumen"); });

Lifecycle-Funktionen ermöglichen es Ihnen, Code zu bestimmten Zeitpunkten im Lebenszyklus einer Komponente auszuführen – beim Mounten, Aktualisieren oder Zerstören.

Beispiele

import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte';

let count = 0;

let element;

// Wird einmal nach dem ersten Rendering ausgeführt

onMount(() => {

console.log("Komponente gemountet");

// Cleanup-Funktion

return () => {

console.log("Komponente wird zerstört");

};

});

// Vor und nach jedem Update

beforeUpdate(() => {

console.log("Vor dem Update");

});

afterUpdate(() => {

console.log("Nach dem Update");

});

// tick() – warten auf DOM-Update

async function increment() {

count++;

await tick();

console.log("DOM aktualisiert");

}

</script>

Count: { count }

</button>

Tipp: onMount wird nur im Browser ausgeführt – ideal für API-Aufrufe oder DOM-Manipulationen. Die Cleanup-Funktion wird beim Zerstören der Komponente aufgerufen (z.B. für Event-Listener).

Svelte im Überblick

.svelte Komponenten-Datei
HTML + CSS + JS

$: Reaktive Statements
Abgeleitete Werte

export let Props deklarieren
Daten von Eltern

bind: Bidirektionale Bindung
Formular-Elemente

$store Store-Zugriff
Globaler Zustand

onMount Lifecycle-Hook
Nach dem Rendering

Quick Summary

.svelte

Komponente

$:

Reaktivität

export let

Props

bind:

Bindings

$store

Stores

onMount

Lifecycle

$: doubled = count * 2 · <input bind:value={name} /> · export let name