javascript / expert
Snippet
Optimierung großer Datensätze mittels $state.raw
$state.raw erzeugt einen flach reaktiven Status. Im Gegensatz zum Standard-$state werden Objekte nicht in Proxys umgewandelt. Dies ist entscheidend für die Performance bei Tausenden von Einträgen, da der Overhead der tiefen Überwachung vermieden wird.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>let items = $state.raw([]);function bulkUpdate(newData) {// Bypasses deep reactivity for massive performance gainsitems = [...items, ...newData];}</script><ul>{#each items as item (item.id)}<li>{item.label}</li>{/each}</ul>
svelte
Erklärung
1
let items = $state.raw([]);
Initialisiert ein flach reaktives Array, das Aktualisierungen nur bei Zuweisung auslöst.
2
items = [...items, ...newData];
Eine Neuzuweisung ist notwendig, um das UI-Update auszulösen, da innere Mutationen nicht verfolgt werden.
3
{#each items as item (item.id)}
Die Verwendung eines Schlüssels (item.id) ist Best Practice für den effizienten Abgleich von Listen in Svelte.