javascript / intermediate
Snippet
Initialisierungslogik mit dem onMount-Hook
Der Lifecycle-Hook onMount wird ausgeführt, nachdem die Komponente zum ersten Mal im DOM gerendert wurde. Er ist der empfohlene Ort für Seiteneffekte wie API-Aufrufe, das Einrichten von Intervallen oder die Interaktion mit Bibliotheken von Drittanbietern, die DOM-Zugriff erfordern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>import { onMount } from 'svelte';let photos = [];onMount(async () => {const res = await fetch('https://api.example.com/photos');photos = await res.json();});</script><ul>{#each photos as photo}<li>{photo.title}</li>{/each}</ul>
svelte
Erklärung
1
onMount(async () => { ... })
Definiert einen Callback, der ausgeführt wird, sobald die Komponente gemountet ist.
2
photos = await res.json();
Das Aktualisieren der Top-Level-Variable löst ein automatisches Re-Rendering der UI aus.