javascript / beginner
Snippet
Optimierung des DOM-Listenabgleichs durch eindeutige Schlüssel in Svelte
Die Angabe eines eindeutigen Schlüssels in Klammern nach dem Iterationsausdruck zeigt Svelte, wie einzelne Listenelemente identifiziert werden. Dies ermöglicht eine performante Wiederverwendung von DOM-Knoten beim Hinzufügen, Entfernen oder Sortieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
<script>let tasks = [{ id: 101, text: 'Inspect telemetry' },{ id: 102, text: 'Refactor styles' }];</script><ul>{#each tasks as task (task.id)}<li>{task.text}</li>{/each}</ul>
svelte
Erklärung
1
{#each tasks as task (task.id)}
Iteriert über das Array und verknüpft jedes Element über task.id mit einem eindeutigen Schlüssel.
2
<li>{task.text}</li>
Rendert den Listeneintrag, der bei Änderungen gezielt im DOM aktualisiert werden kann.
3
{/each}
Schließt den geschlüsselten Schleifenblock.