Rune di Svelte 5: $state, $derived, $effect, $props | We.Inc
Ogni rune di Svelte 5 con il codice Svelte 4 che sostituisce: $state, $derived, $effect, $props e $bindable, più la nuova sintassi per eventi e snippet. Esempi pronti da copiare.
Le rune sono le parole chiave del compilatore che Svelte 5 usa per la reattività. $state dichiara una variabile reattiva, $derived calcola un valore a partire da altro stato, $effect esegue codice dopo l'aggiornamento della pagina, $props legge le prop del componente e $bindable indica una prop a cui un genitore può fare bind. Sostituiscono il let reattivo, l'etichetta $: ed export let di Svelte 4.
La sintassi di Svelte 4 e la rune che la sostituisce
Compito
Svelte 4
Svelte 5
Variabile reattiva
let count = 0
let count = $state(0)
Valore calcolato
$: doubled = count * 2
let doubled = $derived(count * 2)
Effetto collaterale
$: console.log(count)
$effect(() => console.log(count))
Prop
export let name
let { name } = $props()
Prop con bind
export let value
let { value = $bindable() } = $props()
Gestore di eventi
on:click={fn}
onclick={fn}
Eventi del componente
createEventDispatcher
Prop di callback
Slot
<slot />
{#snippet} e {@render}
Scegli una rune per vedere un componente Svelte 4 e la sua riscrittura in Svelte 5. Ogni coppia si comporta allo stesso modo, quindi puoi migrare un file alla volta e controllare il risultato man mano.
Seleziona una rune o una modifica di sintassi dai pulsanti.
Confronta il codice Svelte 4 a sinistra con il codice Svelte 5 a destra.
Leggi la nota per la regola che trae più spesso in inganno.
Copia la versione Svelte 5 nel tuo componente.
Usa $derived per tutto ciò che puoi calcolare. Tieni $effect per interagire con elementi esterni a Svelte, come il titolo del documento, un canvas o un widget di terze parti.
Ricorda che $effect non viene mai eseguito durante il rendering sul server, quindi è un posto sicuro per il codice che tocca window o document.
Usa $state.raw per array grandi che sostituisci sempre per intero. Salta il proxy profondo e può solo essere riassegnato.
Passa $state.snapshot(value) alle librerie che si aspettano un oggetto semplice invece di un proxy.
Le rune funzionano anche nei file .svelte.js e .svelte.ts, il che ti permette di condividere logica reattiva fuori dai componenti.
Domande frequenti
Devo riscrivere tutta la mia app per Svelte 5?
No. Svelte 5 supporta ancora la sintassi di Svelte 4, e i componenti vecchio stile e quelli basati sulle rune possono convivere nella stessa app e usarsi a vicenda, quindi puoi convertire i file uno per uno.
Perché il mio $effect non si riesegue?
Svelte traccia solo lo stato letto in modo sincrono dentro l'effetto. Un valore letto dopo un await o dentro una callback di setTimeout non è una dipendenza, quindi cambiarlo non ha effetto.
Posso modificare un valore $derived?
Da Svelte 5.25 puoi riassegnare temporaneamente un valore derivato, utile per gli aggiornamenti ottimistici, a meno che non sia dichiarato con const. Viene ricalcolato quando cambiano le sue dipendenze. Le versioni precedenti trattano i derivati come di sola lettura.
Cosa ha sostituito createEventDispatcher?
Le prop di callback. Il figlio riceve una funzione come onsave tramite $props e la chiama, e il genitore passa il gestore come qualsiasi altro attributo.
Come do un id univoco a un campo di un modulo?
Chiama $props.id(), aggiunto in Svelte 5.20. Restituisce un id univoco per l'istanza del componente che coincide tra server e browser, quindi è sicuro per for e aria-labelledby.
$state è profondo per impostazione predefinita
Avvolgere un array o un oggetto semplice in $state ti dà un proxy reattivo in profondità. Aggiungere elementi all'array o impostare una proprietà annidata aggiorna solo le parti della pagina che la leggono, senza bisogno di riassegnare l'intero valore.
Anche i campi di una classe possono essere stato: dichiara un campo con $state dentro una classe e il compilatore lo trasforma in una coppia getter e setter.
$derived deve restare puro
L'espressione dentro $derived deve solo calcolare. Svelte rifiuta modifiche di stato come count++ al suo interno. Per logica più lunga, $derived.by accetta una funzione il cui valore di ritorno diventa il valore derivato.
I derivati sono lazy: Svelte li segna come obsoleti quando cambia una dipendenza e li ricalcola alla lettura successiva, saltando il lavoro a valle quando il risultato è lo stesso.
Tempistica e cleanup di $effect
Un effetto viene eseguito dopo il mount del componente e di nuovo dopo che cambiano le sue dipendenze, una volta aggiornato il DOM. Restituisci una funzione dall'effetto per ripulire timer o listener prima dell'esecuzione successiva e quando il componente viene distrutto.
Se devi misurare o regolare qualcosa prima che il DOM cambi, ad esempio per tenere una chat scrollata in fondo, usa invece $effect.pre.
Condividere stato tra componenti
Uno store reattivo in un file .svelte.js
Una variabile $state riassegnata non può essere esportata direttamente, quindi esporta un oggetto e modifica le sue proprietà.
$state
Un let semplice non è più reattivo in modalità rune. Avvolgi il valore iniziale in $state e aggiornalo come qualsiasi variabile.
$derived
L'etichetta $: faceva due lavori. I calcoli diventano $derived; Svelte li ricalcola quando count cambia.
$effect
Gli effetti collaterali di $: passano in $effect. Viene eseguito nel browser dopo l'aggiornamento del DOM, e il suo valore di ritorno è il cleanup.
$props
Tutte le prop arrivano tramite un'unica destrutturazione. Valori predefiniti, rinomine e rest prop usano la normale sintassi JavaScript.
$bindable
Segna una prop con $bindable così un genitore può usare bind: su di essa. Il codice del genitore resta lo stesso.
Eventi
on:click diventa l'attributo onclick, e gli eventi personalizzati diventano prop di callback invece di createEventDispatcher.
Snippet
Lo snippet children sostituisce lo slot predefinito, e {@render} lo posiziona. Il ?. salta il rendering quando non sono stati passati children.