javascript / intermediate
Snippet
Sicherung der Reaktivität durch Immutable Patterns
Die Reaktivität von Svelte wird durch Zuweisung (=) ausgelöst. Beim Arbeiten mit Arrays oder Objekten müssen Sie die gesamte Referenz ersetzen, anstatt Eigenschaften direkt zu mutieren, um sicherzustellen, dass Svelte die Änderung erkennt und die UI aktualisiert.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
let tasks = [{ id: 1, text: 'Code', done: false }];function toggleTask(id) {// Trigger reactivity by creating a new reference via maptasks = tasks.map(t =>t.id === id ? { ...t, done: !t.done } : t);}function addTask(text) {// Spread operator ensures a new array referencetasks = [...tasks, { id: Date.now(), text, done: false }];}
svelte
Erklärung
1
tasks = tasks.map(t => ... )
Die map-Methode erstellt ein neues Array, und die Zuweisung (=) löst die Reaktivität von Svelte aus.
2
{ ...t, done: !t.done }
Verwendet den Spread-Operator, um eine flache Kopie des Objekts mit einer geänderten Eigenschaft zu erstellen.
3
tasks = [...tasks, ...]
Erstellt ein neues Array mit allen alten Elementen plus einem neuen und weist es wieder zu.