0Pricing
Sveltejs Academy · Lekcja

Zmienne reaktywne z użyciem let

Deklaruj stan reaktywny w Svelte za pomocą zwykłych deklaracji let.

Zmienne reaktywne z użyciem let to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Brak specjalnego API

W Svelte zwykłe deklaracje let w bloku script są reaktywne. Nie ma odpowiednika useState.

Deklarowanie i używanie

Należy zadeklarować zmienną i wstawić jej wartość w znacznikach. Jej aktualizacja spowoduje ponowne wyrenderowanie zależnego fragmentu.

<script>
  let count = 0;
</script>

<p>The count is {count}</p>

Aktualizacja przez przypisanie

Wyzwalaczem jest przypisanie. count = count + 1 informuje Svelte, że wartość się zmieniła.

function inc() { count = count + 1; }

Skrócony zapis inkrementacji

Działają również standardowe skrócone zapisy JS: count++, count += 5 itd.

function inc() { count++; }

Tablice i modyfikowanie

Modyfikacja tablicy za pomocą push NIE uruchamia reaktywności. Należy ponownie przypisać jej wartość.

items = [...items, newItem];   // ok
items.push(newItem);            // does not update

Obiekty i modyfikowanie

Ta sama zasada dotyczy obiektów: należy zastąpić referencję albo ponownie przypisać konkretną właściwość oraz obiekt nadrzędny.

user.name = "Bea";
user = user;   // tell Svelte it changed

Dlaczego przypisanie ma znaczenie

Kompilator Svelte instrumentuje operatory przypisania. Wywołania metod, takie jak push, są dla kompilatora niewidoczne.

Lokalne a współdzielone

Zwykłe let tworzy stan lokalny dla jednej instancji komponentu. Aby współdzielić stan między komponentami, należy użyć props lub stores.

Wartości początkowe

Prawa strona deklaracji let jest wykonywana raz podczas inicjalizacji instancji komponentu.

Typowanie

Przy użyciu lang="ts" należy jawnie określać typy zmiennych.

<script lang="ts">
  let count: number = 0;
</script>

Wiele zmiennych

Można zadeklarować dowolną liczbę zmiennych reaktywnych, w jednym wierszu lub w wielu wierszach.

let x = 0, y = 0;
let items = [];

Szybki test

Co uruchamia reaktywność?

Podsumowanie

Zwykłe let jest reaktywne. Aby wywołać aktualizację, należy ponownie przypisać wartość, a nie ją modyfikować. Tablice i obiekty wymagają zmiany referencji.

Często zadawane pytania

Czy lekcja „Zmienne reaktywne z użyciem let” jest bezpłatna?

Tak — pełny tekst „Zmienne reaktywne z użyciem let” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zmienne reaktywne z użyciem let”?

Deklaruj stan reaktywny w Svelte za pomocą zwykłych deklaracji let. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?

Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Zmienne reaktywne z użyciem let”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?

Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Struktura script template style
  2. Zmienne reaktywne z użyciem let
  3. Interpolacja: {expression}
  4. Wartości obliczane: deklaracje reaktywne $:
← Powrót do Sveltejs Academy