Beregnede værdier: $:-reaktive deklarationer
Afled automatisk værdier fra reaktiv state med syntaksen for labelen $:
Beregnede værdier: $:-reaktive deklarationer er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
$:-labelen
Sæt $: foran en vilkårlig sætning for at gøre den reaktiv. Den køres igen, hver gang de refererede variabler ændres.
$: doubled = count * 2;Automatisk sporing
Svelte gennemgår højresiden for variable referencer. Du skal ikke angive afhængigheder manuelt.
Brug i markup
Brug den afledte værdi i skabeloner ligesom enhver anden reaktiv variabel.
<p>Double: {doubled}</p>Blokform
Den reaktive label kan omslutte en blok med sætninger til sideeffekter.
$: {
console.log("count changed to", count);
localStorage.setItem("count", count);
}Flere reaktive sætninger
Deklarér så mange $:-sætninger som nødvendigt. Svelte ordner dem efter afhængigheder.
$: doubled = count * 2;
$: quadrupled = doubled * 2;Reaktiv if
Du kan kombinere $: med kontrolflow til betingede sideeffekter.
$: if (count >= 10) { alert("limit reached"); }Svarer til useEffect
Tænk på $: som en mere praktisk useEffect. Ingen afhængighedsarrays.
Undgå tungt arbejde
Reaktive sætninger bør være hurtige. Overvej memoisering ved beregninger, der er dyre, eller flyt arbejdet til en store.
Asynkron kode indeni
Du kan bruge await indeni, men vær forsigtig: Sætningen kan blive kørt igen, før de tidligere await-operationer er fuldført.
Hvornår det ikke skal bruges
For rene funktioner af input er $: x = f(y) fremragende. Ved reelle sideeffekter bør du foretrække livscyklus-hooks som onMount.
Kun på øverste niveau
Etiketten $: skal stå på øverste niveau i script-blokken, ikke inde i en funktion eller en indlejret blok.
Hurtigt tjek
Hvad gør $:?
Opsummering
$: erklærer reaktive beregnede værdier og sideeffekter. Afhængigheder registreres automatisk.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Beregnede værdier: $:-reaktive deklarationer” gratis?
Ja — hele teksten til “Beregnede værdier: $:-reaktive deklarationer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Beregnede værdier: $:-reaktive deklarationer”?
Afled automatisk værdier fra reaktiv state med syntaksen for labelen $: Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Beregnede værdier: $:-reaktive deklarationer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Strukturen i script-, template- og style-sektionerne
- Reaktive variabler med let
- Interpolation: {expression}
- Beregnede værdier: $:-reaktive deklarationer