Elke Svelte 5-rune met de Svelte 4-code die hij vervangt: $state, $derived, $effect, $props en $bindable, plus de nieuwe syntax voor events en snippets. Voorbeelden om te kopiëren.
Runes zijn de compiler-keywords die Svelte 5 voor reactiviteit gebruikt. $state declareert een reactieve variabele, $derived berekent een waarde uit andere state, $effect voert code uit nadat de pagina is bijgewerkt, $props leest component-props en $bindable markeert een prop waaraan een parent mag binden. Ze vervangen de reactieve let, het $:-label en export let uit Svelte 4.
Svelte 4-syntax en de rune die hem vervangt
Taak
Svelte 4
Svelte 5
Reactieve variabele
let count = 0
let count = $state(0)
Berekende waarde
$: doubled = count * 2
let doubled = $derived(count * 2)
Side effect
$: console.log(count)
$effect(() => console.log(count))
Props
export let name
let { name } = $props()
Bindbare prop
export let value
let { value = $bindable() } = $props()
Event handler
on:click={fn}
onclick={fn}
Component-events
createEventDispatcher
Callback-props
Slots
<slot />
{#snippet} and {@render}
Kies een rune om een Svelte 4-component en de herschreven versie in Svelte 5 te zien. Elk paar gedraagt zich hetzelfde, dus u kunt bestand voor bestand migreren en het resultaat onderweg controleren.
Kies een rune of syntaxwijziging met de knoppen.
Vergelijk de Svelte 4-code links met de Svelte 5-code rechts.
Lees de notitie voor de regel waar mensen over struikelen.
Kopieer de Svelte 5-versie naar uw component.
Gebruik $derived voor alles wat u kunt berekenen. Bewaar $effect voor communicatie met dingen buiten Svelte, zoals de documenttitel, een canvas of een widget van derden.
Onthoud dat $effect nooit draait tijdens server-rendering, dus het is een veilige plek voor code die window of document aanraakt.
Gebruik $state.raw voor grote arrays die u alleen ooit vervangt. Het slaat de diepe proxy over en kan alleen opnieuw worden toegewezen.
Geef $state.snapshot(value) door aan libraries die een gewoon object verwachten in plaats van een proxy.
Runes werken ook in .svelte.js- en .svelte.ts-bestanden, zodat u reactieve logica buiten componenten kunt delen.
Veelgestelde vragen
Moet ik mijn hele app herschrijven voor Svelte 5?
Nee. Svelte 5 ondersteunt nog steeds de Svelte 4-syntax, en componenten in de oude stijl en componenten met runes kunnen in dezelfde app naast elkaar bestaan en elkaar gebruiken, dus u kunt bestanden een voor een omzetten.
Waarom draait mijn $effect niet opnieuw?
Svelte volgt alleen state die synchroon binnen het effect wordt gelezen. Een waarde die na een await of in een setTimeout-callback wordt gelezen is geen dependency, dus het wijzigen ervan doet niets.
Kan ik een $derived-waarde wijzigen?
Sinds Svelte 5.25 kunt u een derived waarde tijdelijk opnieuw toewijzen, wat helpt bij optimistic updates, tenzij hij met const is gedeclareerd. Hij wordt herberekend zodra zijn dependencies veranderen. Eerdere versies behandelen deriveds als alleen-lezen.
Wat heeft createEventDispatcher vervangen?
Callback-props. Het child ontvangt via $props een functie zoals onsave en roept die aan, en de parent geeft de handler mee zoals elk ander attribuut.
Hoe geef ik een formulierveld een uniek id?
Roep $props.id() aan, toegevoegd in Svelte 5.20. Het geeft een id terug dat uniek is voor de componentinstantie en tussen server en browser overeenkomt, dus het is veilig voor for en aria-labelledby.
$state is standaard diep
Als u een array of gewoon object in $state verpakt, krijgt u een diep reactieve proxy. Iets aan de array toevoegen of een geneste property zetten werkt alleen de delen van de pagina bij die hem lezen, zonder dat u de hele waarde opnieuw hoeft toe te wijzen.
Klassevelden kunnen ook state zijn: declareer een veld met $state binnen een klasse en de compiler maakt er een getter-setterpaar van.
$derived moet puur blijven
De expressie binnen $derived mag alleen rekenen. Svelte weigert state-wijzigingen zoals count++ daarbinnen. Voor langere logica accepteert $derived.by een functie waarvan de returnwaarde de derived waarde wordt.
Deriveds zijn lazy: Svelte markeert ze als verouderd wanneer een dependency verandert en herberekent ze bij de volgende keer lezen, waarbij werk verderop wordt overgeslagen als het resultaat gelijk blijft.
Timing en opruimen bij $effect
Een effect draait nadat het component is gemount en opnieuw nadat zijn dependencies veranderen, zodra de DOM is bijgewerkt. Geef vanuit het effect een functie terug om timers of listeners op te ruimen vóór de volgende run en wanneer het component wordt vernietigd.
Moet u iets meten of aanpassen voordat de DOM verandert, zoals een chatlog onderaan gescrold houden, gebruik dan in plaats daarvan $effect.pre.
State delen tussen componenten
Een reactieve store in een .svelte.js-bestand
Een $state-variabele die opnieuw wordt toegewezen kan niet direct worden geëxporteerd, dus exporteer een object en wijzig in plaats daarvan de properties ervan.
$state
Een gewone let is in runes-modus niet meer reactief. Verpak de beginwaarde in $state en werk hem bij zoals elke variabele.
$derived
Het $:-label deed twee taken. Berekeningen worden $derived; Svelte herberekent ze wanneer count verandert.
$effect
Side effects uit $: verhuizen naar $effect. Het draait in de browser nadat de DOM is bijgewerkt, en de returnwaarde is het opruimwerk.
$props
Alle props komen binnen via één destructuring-statement. Standaardwaarden, hernoemingen en rest-props gebruiken gewone JavaScript-syntax.
$bindable
Markeer een prop met $bindable zodat een parent er bind: op kan gebruiken. De code van de parent blijft hetzelfde.
Events
on:click wordt het onclick-attribuut, en eigen events worden callback-props in plaats van createEventDispatcher.
Snippets
De children-snippet vervangt de standaardslot, en {@render} plaatst hem. De ?. slaat het renderen over als er geen children zijn meegegeven.
Svelte 4-code en de herschreven versie in Svelte 5