Snippet

Verbesserung der Render-Performance mit Keyed-Each-Blöcken

Durch die Angabe eines eindeutigen Schlüssels wie (item.id) in einem each-Block kann Svelte genau erkennen, welche DOM-Elemente sich geändert haben, verschoben oder entfernt wurden. Dies verhindert unnötiges Neuerstellen von DOM-Knoten und verbessert die Performance erheblich.

snippet.js

javascript

<script>
  let items = [
    { id: 'item-101', name: 'Keyboard', price: 79 },
    { id: 'item-102', name: 'Mouse', price: 49 },
    { id: 'item-103', name: 'Monitor', price: 199 }
  ];
 
  function removeItem(targetId) {
    items = items.filter(item => item.id !== targetId);
  }
</script>
 
<ul>
  {#each items as item (item.id)}
    <li>
      <span>{item.name} - ${item.price}</span>
      <button on:click={() => removeItem(item.id)}>Remove</button>
    </li>
  {/each}
</ul>

svelte

Erklärung

{#each items as item (item.id)}

Definiert eine eindeutige Kennung (item.id) als Schlüssel, um das DOM-Diffing und das Wiederverwenden von Elementen zu optimieren.

items = items.filter(item => item.id !== targetId);

Löst Sveltes Reaktivität aus, indem ein neues, nach der ID gefiltertes Array zugewiesen wird.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Verbesserung der Render-Performance mit Keyed-Each-Blöcken

Verwandt