📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 02: Reatividade (ref & reactive)

Especialização em Frontend com Vue.js

---

🗺️ O Mecanismo de Rastreamento de Dependências com ES6 Proxies

sequenceDiagram
    autonumber
    actor T as Template Vue / Effect
    participant P as Proxy Reativo (Vue Reactivity Engine)
    participant D as Dep (Conjunto de Dependências)

    T->>P: get(target, 'prop') durante a renderização
    P->>D: track() -> Registra que o Template depende dessa propriedade!
    P-->>T: Retorna valor atual
    Note over T,P: Usuário clica e altera o valor
    T->>P: set(target, 'prop', novoValor)
    P->>D: trigger() -> Notifica TODOS os efeitos inscritos!
    D-->>T: Re-renderiza APENAS o elemento necessário no DOM! ⚡

---

🎯 Slide 1: ref vs reactive

• ref(valor): Funciona para qualquer tipo (primitivos como string, number, boolean e objetos). No JavaScript, acesse com .value. No <template>, o desempacotamento é automático!

• reactive(objeto): Funciona apenas para objetos/arrays. Não usa .value.

• Aviso Crítico: Desestruturar um reactive destrói a reatividade a menos que você use toRefs()!

---

🎯 Slide 2: Boas Práticas: Prefira ref como Padrão

// Recomendação oficial da equipe do Vue:
const usuario = ref<Usuario>({ id: 1, nome: "Carlos" });
usuario.value.nome = "Ana"; // Reativo e explícito!

---

🎯 Slide 3: Desestruturação Segura com toRefs

const estado = reactive({ contagem: 0, nome: 'Vue' });
// Sem perder a reatividade:
const { contagem, nome } = toRefs(estado);

---

🔗 Navegação do Capítulo 02

📖 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