Variabili reattive con let
Dichiari lo stato reattivo in Svelte utilizzando semplici dichiarazioni let.
Variabili reattive con let è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.
Nessuna API speciale
In Svelte, le normali dichiarazioni let nel blocco script sono reattive. Non esiste un equivalente di useState.
Dichiarazione e utilizzo
Dichiari una variabile e la interpoli nel markup. Quando la aggiorna, viene nuovamente renderizzata la parte che dipende da essa.
<script>
let count = 0;
</script>
<p>The count is {count}</p>Aggiornamento tramite assegnazione
L'assegnazione è ciò che attiva l'aggiornamento. count = count + 1 comunica a Svelte che il valore è cambiato.
function inc() { count = count + 1; }Abbreviazione per l'incremento
Funzionano anche le abbreviazioni standard di JS: count++, count += 5 e così via.
function inc() { count++; }Array e mutazioni
La mutazione di un array tramite push NON attiva la reattività. È necessario riassegnarlo.
items = [...items, newItem]; // ok
items.push(newItem); // does not updateOggetti e mutazioni
La stessa regola vale per gli oggetti: sostituisca il riferimento oppure riassegni una proprietà specifica e l'oggetto padre.
user.name = "Bea";
user = user; // tell Svelte it changedPerché l'assegnazione è importante
Il compilatore Svelte strumenta gli operatori di assegnazione. Le chiamate a metodi come push sono invisibili al compilatore.
Locale o condiviso
Un semplice let crea uno stato locale a una singola istanza del componente. Per condividere lo stato tra componenti, usi props o stores.
Valori iniziali
Il lato destro della dichiarazione let viene eseguito una volta, quando l'istanza del componente viene inizializzata.
Tipizzazione
Con lang="ts", assegni tipi espliciti alle variabili.
<script lang="ts">
let count: number = 0;
</script>Più variabili
Può dichiarare tutte le variabili reattive che desidera, su una o più righe.
let x = 0, y = 0;
let items = [];Verifica rapida
Che cosa attiva la reattività?
Riepilogo
Un semplice let è reattivo. Riassegni, invece di mutare, per attivare gli aggiornamenti. Array e oggetti richiedono modifiche al riferimento.
Domande Frequenti
La lezione «Variabili reattive con let» è gratuita?
Sì — il testo completo di «Variabili reattive con let» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.
Cosa imparerò in «Variabili reattive con let»?
Dichiari lo stato reattivo in Svelte utilizzando semplici dichiarazioni let. Eserciti Sveltejs Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Sveltejs Academy?
Non è richiesta alcuna esperienza precedente. Sveltejs Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Variabili reattive con let»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Sveltejs Academy?
Sì. Ogni lezione Sveltejs Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Struttura di script, template e style
- Variabili reattive con let
- Interpolazione: {expression}
- Valori calcolati: dichiarazioni reattive $: