Interviewfragen zu Svelte mit Antworten

Beispielfragen

Ein paar Fragen aus jedem Level mit richtiger Antwort und Erklärung.

Svelte · Junior

1. Was ist Svelte?
   ▸Antwort zeigen

   Richtige Antwort: Ein UI-Framework, das Komponenten in direkte DOM-Updates kompiliert

   Svelte erledigt den Großteil seiner Arbeit beim Build. Die Ausgabe ist kleiner, schlanker Code, der genau die DOM-Knoten ändert, die von geändertem State abhängen, ohne virtuelles DOM.

2. Was ist SvelteKit?
   ▸Antwort zeigen

   Richtige Antwort: Das offizielle App-Framework für Svelte, gebaut auf Vite

   Svelte ist die Komponentenschicht; SvelteKit ergänzt, was eine vollständige App braucht, ähnlich wie Next.js für React oder Nuxt für Vue.

3. Wie legt man ein neues SvelteKit-Projekt empfohlen an?
   ▸Antwort zeigen

   Richtige Antwort: npx sv create my-app

   sv ist die offizielle Svelte-CLI. Sie legt das Projekt an und kann Integrationen wie TypeScript, ESLint, Vitest oder Playwright hinzufügen.

4. Was kann eine .svelte-Datei enthalten?
   ▸Antwort zeigen

   Richtige Antwort: Einen <script>-Block, Markup und einen <style>-Block, alles optional

   Eine Komponente kann mehrere Elemente auf oberster Ebene haben. Es gibt auch <script module>, das einmal beim Auswerten des Moduls läuft statt für jede Instanz.

Svelte · Middle

1. Was ist der Unterschied zwischen $effect und $effect.pre?
   ▸Antwort zeigen

   Richtige Antwort: $effect.pre läuft vor DOM-Updates, $effect danach

   $effect.pre ersetzt beforeUpdate aus Svelte 4, und $effect ersetzt afterUpdate.

2. Warum aktualisiert items.set(k, v) die UI nicht, wenn items eine einfache Map in $state ist?
   ▸Antwort zeigen

   Richtige Antwort: $state proxyt keine Map; SvelteMap nutzen

   svelte/reactivity hat auch SvelteSet, SvelteDate, SvelteURL, SvelteURLSearchParams und MediaQuery. Ihre Werte werden nicht tief reaktiv gemacht.

3. Wobei hilft $inspect.trace()?
   ▸Antwort zeigen

   Richtige Antwort: Es loggt, welche Abhängigkeit den erneuten Lauf auslöste

   Nützlich, wenn sich etwas zu oft oder gar nicht aktualisiert. Wie $inspect tut es in Produktion nichts.

4. Was ist ein Vorteil von Snippets gegenüber Slots aus Svelte 4?
   ▸Antwort zeigen

   Richtige Antwort: Sie sind Werte: man kann sie übergeben, typisieren und wiederverwenden

   Snippets auf oberster Ebene lassen sich sogar in <script> referenzieren und aus <script module> exportieren, wenn sie keinen Komponenten-State nutzen.

Svelte · Senior

1. Welches Modell nutzt die Reaktivität von Svelte 5 unter der Haube?
   ▸Antwort zeigen

   Richtige Antwort: Signals: Lesen registriert Abhängigkeiten, Schreiben plant betroffene Effects ein

   Template-Ausdrücke sind ebenfalls Effects. Runes sind die Syntax über dieser Laufzeit; Svelte 4 stützte sich stattdessen darauf, dass der Compiler Zuweisungen instrumentiert.

2. Warum ist Svelte 5 von der vom Compiler instrumentierten let-Reaktivität zu Runes gewechselt?
   ▸Antwort zeigen

   Richtige Antwort: Die alte Reaktivität ging nur auf oberster Ebene; Runes sind überall explizit

   Bei $:-Anweisungen wurden Abhängigkeiten statisch und nur beim Kompilieren bestimmt; Runes verfolgen sie zur Laufzeit, auch über Funktionsaufrufe hinweg.

3. Wie werden $derived-Werte ausgewertet?
   ▸Antwort zeigen

   Richtige Antwort: Lazy und memoisiert: neu berechnet beim Lesen nach einer Änderung

   Svelte nutzt Push-Pull-Reaktivität: Änderungen markieren Abhängige als dirty (Push), Werte werden beim Lesen neu berechnet (Pull). Gleiche Ergebnisse werden nicht weitergegeben.

4. Was kosten tiefe $state-Proxys, und wie steuert man das?
   ▸Antwort zeigen

   Richtige Antwort: Lesezugriffe laufen über einen Proxy; für große Daten $state.raw nutzen

   Nutze $state nur für Werte, die Effects, abgeleitete Werte oder das Template antreiben. Nicht reaktive Daten können in normalen Variablen bleiben.

Kombinierte Tests mit diesem Thema

Fragen aus mehreren Themen auf einmal, wie im Vorstellungsgespräch für eine konkrete Stelle.