📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 04: computed & watchers

Especialização em Frontend com Vue.js

---

🗺️ Árvore de Decisão: Quando Usar computed, watch ou watchEffect?

flowchart TD
    Q1{"Você precisa calcular um NOVO valor para exibir na tela?"}
    Q1 -- "SIM" --> COMPUTED["Use computed(() => ...)\n(Cálculo puro / Memoization em cache / Sem efeitos colaterais)"]
    Q1 -- "NÃO" --> Q2{"Você precisa disparar um Efeito Colateral\n(API, localStorage, timer)?"}
    Q2 -- "Precisa de valor antigo vs novo, ou execução lazy?" --> WATCH["Use watch(fonte, (novo, antigo) => { ... })\n(Explícito / Suporta lazy / deep / immediate)"]
    Q2 -- "Quer rastrear automaticamente as variáveis lidas?" --> WATCH_EFFECT["Use watchEffect(() => { ... })\n(Executa imediatamente / Rastreamento implícito)"]

    style Q1 fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style COMPUTED fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style Q2 fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style WATCH fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style WATCH_EFFECT fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px

---

🎯 Slide 1: computed com Memoization

const carrinho = ref<Item[]>([]);

// Só recalcula se 'carrinho.value' mudar!
const total = computed(() => {
  return carrinho.value.reduce((acc, i) => acc + i.preco * i.quantidade, 0);
});

---

🎯 Slide 2: watch Explícito

const busca = ref('');

// Observa mudanças específicas e fornece o valor antigo:
watch(busca, (novoTexto, textoAnterior) => {
  console.log(`Buscando por: ${novoTexto} (antes era: ${textoAnterior})`);
  carregarResultados(novoTexto);
});

---

🎯 Slide 3: Opções do watch: immediate & deep

• { immediate: true }: Executa o callback logo na montagem do componente.

• { deep: true }: Rastreia alterações em propriedades aninhadas dentro de objetos.

---

🔗 Navegação do Capítulo 04

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim