render_macros: false

Aula 06 - Controle de Fluxo 🔁

Tornando a UI Dinâmica

Agenda de Hoje 📅

1. Lógica no Markup: O sinal #
2. Condicionais com {#if}
3. Alternativas com {:else}
4. Loops com {#each}
5. A importância das Chaves (Keys)
6. Prática: Lista de Tarefas Dinâmica

1. Blocos Lógicos 🧱

• No Svelte, a lógica não usa atributos (como v-if ou *ngIf).
• Usamos blocos que começam com {#...} e terminam com {/...}.

2. O Bloco {#if} ❓

• Controla se um elemento deve ou não existir no DOM.

{#if logado}
  <button>Sair</button>
{/if}

3. Else e Else If 🔀

• Podemos criar caminhos alternativos.

{#if nota >= 7}
  <p>Aprovado! 🎉</p>
{:else if nota >= 5}
  <p>Recuperação 😐</p>
{:else}
  <p>Reprovado ❌</p>
{/if}

4. O Bloco {#each} 🔄

• Serve para repetir elementos baseados em um array.

<script>
  let frutas = ["Maçã", "Banana", "Uva"];
</script>

<ul>
  {#each frutas as fruta}
    <li>{fruta}</li>
  {/each}
</ul>

4.1 Pegando o Índice (Index)

• O Svelte permite capturar a posição do item.

{#each frutas as fruta, i}
  <li>{i + 1} - {fruta}</li>
{/each}

4.2 Array Vazio

• Podemos mostrar uma mensagem caso a lista não tenha nada.

{#each tarefas as t}
  <p>{t}</p>
{:else}
  <p>Parabéns! Você não tem tarefas pendentes. 😎</p>
{/each}

5. A Importância das Chaves (Keys) 🔑

• Listas que mudam de ordem ou sofrem exclusões precisam de uma "chave" única (ex: ID).
• Isso ajuda o Svelte a saber EXATAMENTE qual elemento atualizar.

{#each usuarios as user (user.id)}
  <Card {user} />
{/each}

6. Performance Comparada 🚀

graph LR
    A[Mudança nos Dados] -->|Svelte| B(Atualiza apenas o elemento alterado)
    A -->|Outros| C(Recalcula lista inteira no Virtual DOM)
    B --> D((Resultado Rápido))

7. Prática: Galeria de Fotos 📷

• Crie uma lista de objetos {id, url, legenda}.
• Use {#each} para renderizar as imagens.
• Use {#if} para mostrar um selo "Novo" se a foto for recente.

8. Dicas de Ouro 💡

• Evite colocar lógica complexa (cálculos) dentro do markup.
• Faça o cálculo no <script> e apenas exiba o resultado.
• Use o {:else} para melhorar a experiência do usuário.

Resumo da Aula ✅

• # inicia, : continua, / termina.
• {#if} para decisões.
• {#each} para coleções e listas.

Próxima Aula: Eventos e Bindings ⌨️

• Capturando cliques (on:click).
• Capturando teclado.
• Sincronização de inputs com bind:value.

Dúvidas? 🤔

"Um loop sem chave é como um livro sem páginas numeradas: você se perde fácil."