Variáveis reativas com let
Declare estado reativo no Svelte usando declarações let simples.
Variáveis reativas com let é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Nenhuma interface especial
No Svelte, declarações comuns de let no bloco de código são reativas. Não há um equivalente a useState.
Declare e use
Declare uma variável e interpole-a na marcação. Ao atualizá-la, a parte que depende dela é renderizada novamente.
<script>
let count = 0;
</script>
<p>The count is {count}</p>Atualização por atribuição
A atribuição é o gatilho. count = count + 1 informa ao Svelte que o valor mudou.
function inc() { count = count + 1; }Abreviação de incremento
As abreviações padrão de JS também funcionam: count++, count += 5 etc.
function inc() { count++; }Vetores e mutação
Alterar um vetor por meio de push não aciona a reatividade: NOT. Você precisa fazer uma nova atribuição.
items = [...items, newItem]; // ok
items.push(newItem); // does not updateObjetos e mutação
A mesma regra se aplica aos objetos: substitua a referência ou atribua novamente uma propriedade específica e o objeto pai.
user.name = "Bea";
user = user; // tell Svelte it changedPor que a atribuição é importante
O compilador Svelte instrumenta os operadores de atribuição. Chamadas de método como push são invisíveis para o compilador.
Local e compartilhado
Um let simples cria um estado local para uma única instância do componente. Para compartilhar entre componentes, use props ou stores.
Valores iniciais
O lado direito da declaração let é executado uma vez, quando a instância do componente é inicializada.
Tipagem
Com lang="ts", atribua tipos explícitos às suas variáveis.
<script lang="ts">
let count: number = 0;
</script>Várias variáveis
Você pode declarar quantas variáveis reativas quiser, em uma ou em várias linhas.
let x = 0, y = 0;
let items = [];Verificação rápida
O que aciona a reatividade?
Resumo
Um let simples é reativo. Faça uma nova atribuição, em vez de uma mutação, para acionar atualizações. Vetores e objetos precisam ter suas referências alteradas.
Perguntas Frequentes
A aula “Variáveis reativas com let” é grátis?
Sim — o texto completo de “Variáveis reativas com let” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Variáveis reativas com let”?
Declare estado reativo no Svelte usando declarações let simples. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Variáveis reativas com let”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- A estrutura de script, modelo e estilo
- Variáveis reativas com let
- Interpolação: {expression}
- Valores calculados: declarações reativas $: