javascript / intermediate
Snippet
Optimierung von Listen mit gekeyten Each-Blöcken
Beim Aktualisieren einer Liste in Svelte versucht das Framework, DOM-Operationen zu minimieren. Durch die Angabe eines eindeutigen Identifikators (eines Keys) in Klammern kann Svelte bestimmte Elemente verfolgen, selbst wenn diese umsortiert oder gefiltert werden, anstatt nur den Inhalt bestehender DOM-Knoten zu aktualisieren.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<script>export let users = [];</script><ul>{#each users as user (user.id)}<li>{user.name}</li>{/each}</ul>
svelte
Erklärung
1
{#each users as user (user.id)}
Initialisiert die Schleife und definiert 'user.id' als eindeutigen Schlüssel für die DOM-Synchronisation.