javascript / expert
Snippet
Lazy Evaluation komplexer Logik via $derived.by
Während $derived ideal für einfache Ausdrücke ist, ermöglicht $derived.by komplexe, mehrstufige Logik, die memoisiert und 'lazy' (träge) bleibt. Die Neuberechnung erfolgt nur, wenn sich die internen Abhängigkeiten (wie 'rawData') ändern, und auch nur dann, wenn auf 'processedData' tatsächlich in der UI oder einem anderen Effekt zugegriffen wird. Dieser funktionale Ansatz kapselt Transformationslogik direkt im Reaktivitätssystem, ohne den Top-Level-Scope der Komponente zu überladen.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
let rawData = $state([...]);const processedData = $derived.by(() => {const filtered = rawData.filter(item => item.isActive);const sorted = filtered.sort((a, b) => b.score - a.score);return sorted.map(item => ({...item,formattedScore: `${(item.score * 100).toFixed(2)}%`}));});
svelte
Erklärung
1
const processedData = $derived.by(() => {
Erstellt eine memoierte reaktive Ableitung unter Verwendung eines Funktionsblocks.
2
rawData.filter(...)
Der Zugriff auf 'rawData' markiert diese als Abhängigkeit für diese Ableitung.
3
return sorted.map(...)
Das Endergebnis wird zurückgegeben und zwischengespeichert, bis sich eine Abhängigkeit ändert.