Każda runa Svelte 5 z kodem ze Svelte 4, który zastępuje: $state, $derived, $effect, $props i $bindable, a także nowa składnia zdarzeń i snippetów. Przykłady gotowe do skopiowania.
Runy to słowa kluczowe kompilatora, których Svelte 5 używa do reaktywności. $state deklaruje reaktywną zmienną, $derived wylicza wartość z innego stanu, $effect uruchamia kod po aktualizacji strony, $props odczytuje propsy komponentu, a $bindable oznacza props, do którego rodzic może się zbindować. Zastępują one reaktywne let ze Svelte 4, etykietę $: oraz export let.
Składnia Svelte 4 i runa, która ją zastępuje
Zadanie
Svelte 4
Svelte 5
Reaktywna zmienna
let count = 0
let count = $state(0)
Wartość wyliczana
$: doubled = count * 2
let doubled = $derived(count * 2)
Efekt uboczny
$: console.log(count)
$effect(() => console.log(count))
Propsy
export let name
let { name } = $props()
Props z bindowaniem
export let value
let { value = $bindable() } = $props()
Obsługa zdarzenia
on:click={fn}
onclick={fn}
Zdarzenia komponentu
createEventDispatcher
Propsy z callbackami
Sloty
<slot />
{#snippet} and {@render}
Wybierz runę, aby zobaczyć komponent w Svelte 4 i jego wersję przepisaną na Svelte 5. Każda para działa tak samo, więc możesz migrować plik po pliku i na bieżąco sprawdzać wynik.
Wybierz runę lub zmianę składni za pomocą przycisków.
Porównaj kod Svelte 4 po lewej z kodem Svelte 5 po prawej.
Przeczytaj uwagę z regułą, na której ludzie najczęściej się potykają.
Skopiuj wersję Svelte 5 do swojego komponentu.
Używaj $derived do wszystkiego, co da się wyliczyć. $effect zostaw do komunikacji z rzeczami spoza Svelte, takimi jak tytuł dokumentu, canvas czy zewnętrzny widżet.
Pamiętaj, że $effect nigdy nie uruchamia się podczas renderowania po stronie serwera, więc to bezpieczne miejsce na kod korzystający z window lub document.
Sięgaj po $state.raw przy dużych tablicach, które zawsze tylko podmieniasz. Pomija ono głębokie proxy i można je tylko przypisać na nowo.
Przekazuj $state.snapshot(value) do bibliotek, które oczekują zwykłego obiektu, a nie proxy.
Runy działają też w plikach .svelte.js i .svelte.ts, co pozwala współdzielić reaktywną logikę poza komponentami.
Najczęściej zadawane pytania
Czy muszę przepisać całą aplikację na Svelte 5?
Nie. Svelte 5 nadal obsługuje składnię Svelte 4, a komponenty w starym stylu i oparte na runach mogą działać w tej samej aplikacji i korzystać ze siebie nawzajem, więc możesz konwertować pliki jeden po drugim.
Dlaczego mój $effect nie uruchamia się ponownie?
Svelte śledzi tylko stan odczytany synchronicznie wewnątrz efektu. Wartość odczytana po await lub wewnątrz callbacku setTimeout nie jest zależnością, więc jej zmiana nic nie robi.
Czy mogę zmienić wartość $derived?
Od Svelte 5.25 możesz tymczasowo przypisać nową wartość do wartości wyliczanej, co pomaga przy optymistycznych aktualizacjach, chyba że jest zadeklarowana przez const. Przelicza się ona, gdy zmienią się jej zależności. Wcześniejsze wersje traktują wartości wyliczane jako tylko do odczytu.
Co zastąpiło createEventDispatcher?
Propsy z callbackami. Dziecko otrzymuje funkcję, na przykład onsave, przez $props i ją wywołuje, a rodzic przekazuje handler jak każdy inny atrybut.
Jak nadać polu formularza unikalne id?
Wywołaj $props.id(), dodane w Svelte 5.20. Zwraca id unikalne dla instancji komponentu, zgodne między serwerem a przeglądarką, więc można go bezpiecznie używać w for i aria-labelledby.
$state jest domyślnie głęboki
Opakowanie tablicy lub zwykłego obiektu w $state daje głęboko reaktywne proxy. Dodanie elementu do tablicy lub ustawienie zagnieżdżonej właściwości aktualizuje tylko te części strony, które ją odczytują, bez potrzeby ponownego przypisywania całej wartości.
Pola klas też mogą być stanem: zadeklaruj pole przez $state wewnątrz klasy, a kompilator zamieni je w parę getter i setter.
$derived musi pozostać czysty
Wyrażenie wewnątrz $derived powinno tylko liczyć. Svelte nie pozwala na zmiany stanu, takie jak count++, w jego wnętrzu. Dla dłuższej logiki $derived.by przyjmuje funkcję, której wartość zwracana staje się wartością wyliczaną.
Wartości wyliczane są leniwe: Svelte oznacza je jako nieaktualne, gdy zmieni się zależność, i przelicza przy następnym odczycie, pomijając dalszą pracę, gdy wynik jest taki sam.
Moment uruchomienia $effect i sprzątanie
Efekt uruchamia się po zamontowaniu komponentu i ponownie po zmianie jego zależności, gdy DOM zostanie już zaktualizowany. Zwróć z efektu funkcję, aby posprzątać timery lub listenery przed następnym uruchomieniem i przy niszczeniu komponentu.
Jeśli musisz coś zmierzyć lub dostosować przed zmianą DOM, na przykład utrzymać log czatu przewinięty na sam dół, użyj zamiast tego $effect.pre.
Współdzielenie stanu między komponentami
Reaktywny store w pliku .svelte.js
Zmiennej $state, do której przypisujesz nowe wartości, nie można wyeksportować bezpośrednio, więc eksportuj obiekt i zmieniaj jego właściwości.
$state
Zwykłe let nie jest już reaktywne w trybie run. Opakuj wartość początkową w $state i aktualizuj ją jak każdą zmienną.
$derived
Etykieta $: pełniła dwie funkcje. Obliczenia stają się $derived; Svelte przelicza je, gdy zmienia się count.
$effect
Efekty uboczne z $: przenoszą się do $effect. Uruchamia się on w przeglądarce po aktualizacji DOM, a jego wartość zwracana służy do sprzątania.
$props
Wszystkie propsy przychodzą przez jedną instrukcję destrukturyzacji. Wartości domyślne, zmiany nazw i propsy rest używają zwykłej składni JavaScriptu.
$bindable
Oznacz props przez $bindable, aby rodzic mógł użyć na nim bind:. Kod rodzica pozostaje bez zmian.
Zdarzenia
on:click staje się atrybutem onclick, a własne zdarzenia stają się propsami z callbackami zamiast createEventDispatcher.
Snippety
Snippet children zastępuje domyślny slot, a {@render} go umieszcza. Operator ?. pomija renderowanie, gdy nie przekazano children.