javascript / expert
Snippet
Mehrstufige Ableitungen mit $derived.by
Während das Standard-$derived für einfache Ausdrücke verwendet wird, akzeptiert $derived.by einen Funktionskörper. Dies ist essenziell für Performance auf Expertenniveau, wenn komplexe Berechnungen durchgeführt werden, die temporäre Variablen oder bedingte Zweige erfordern, während sie reaktiv bleiben.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
let rawScores = $state([85, 92, 78]);let stats = $derived.by(() => {const sum = rawScores.reduce((a, b) => a + b, 0);const average = sum / rawScores.length;return {average,grade: average > 90 ? 'A' : 'B'};});
svelte
Erklärung
1
$derived.by(() => { ... })
Erstellt eine reaktive Berechnung, die mehrere Anweisungen und lokale Variablen enthalten kann.
2
return { average, grade }
Der Rückgabewert wird zum schreibgeschützten reaktiven Wert der 'stats'-Variable.