Aula 04 - Reatividade ⚡

O Coração do Svelte

Agenda de Hoje 📅

1. O que é Reatividade?
2. Atribuição: O gatilho reativo
3. Reatividade em Arrays e Objetos
4. O Operador $:
5. Declarações e Blocos Reativos
6. Prática: Calculadora Inteligente

1. O que é Reatividade? 🔄

• É a capacidade da interface se atualizar automaticamente quando os dados mudam.
• No Svelte, isso é resolvido na compilação, sem Virtual DOM.

2. O Gatilho: Atribuição 🔫

• O Svelte "escuta" o sinal de igual =.
• Se você atribui um valor, o componente se marca para atualização.

<script>
  let contador = 0;
  function incrementar() {
    contador = contador + 1; // Gatilho!
  }
</script>

3. Armadilhas: Arrays e Objetos 🪤

• Métodos que modificam o array original (ex: .push()) NÃO disparam a reatividade sozinhos.

// Ruim (Não atualiza a tela):
lista.push(novoItem);

// Bom (Dispara a reatividade):
lista = [...lista, novoItem]; 
// ou
lista.push(novoItem);
lista = lista; // Re-atribuição forçada

4. O Operador $: 🪄

• É o segredo do Svelte para cálculos dependentes.
• "Sempre que as variáveis deste cálculo mudarem, execute-o novamente".

<script>
  let preco = 10;
  let qtd = 2;
  $: total = preco * qtd; // Reativo!
</script>

<p>Total: {total}</p>

5. Declarações Reativas 📢

• Elas funcionam como "fórmulas de Excel".
• Se preco ou qtd mudar, total é recalculado instantaneamente.

6. Blocos Reativos 📦

• Você pode agrupar várias linhas de código reativo.

<script>
  let valor = 0;
  $: {
    console.log("O valor mudou para:", valor);
    if (valor > 10) {
      alert("Valor muito alto!");
    }
  }
</script>

7. Fluxo de Dependência 🌊

graph TD
    A[Variável A] -->|Muda| B($: Cálculo B)
    B -->|Atualiza| C($: Cálculo C)
    C -->|Renderiza| D((Interface))

8. Debugging com $: 🐞

• Quer saber quando uma variável muda?
• Use um log reativo:

<script>
  let nome = "";
  $: console.log("Input atual:", nome);
</script>

9. Prática: Calculadora de IMC ⚖️

• Inputs para peso e altura.
• Declaração reativa para imc = peso / (altura * altura).
• Bloco reativo para classificar o resultado (Abaixo do peso, Ideal, etc).

10. Resumo da Aula ✅

• Reatividade exige atribuição (=).
• Objetos/Arrays precisam de re-atribuição ou spread (...).
• O operador $: automatiza cálculos e efeitos colaterais.

Próxima Aula: Componentização 🧩

• Criando múltiplos arquivos.
• Passando dados com export let.
• O conceito de Pai e Filho.

Dúvidas? 🤔

"No Svelte, a reatividade é uma característica da linguagem, não uma biblioteca."