Ciclo de Vida e Hooks 🔄

Aula 07 - Os estágios de vida do Componente

🐣 A Vida de um Componente

• Ele é criado (Setup)
• Ele é montado no site (Mounted)
• Ele é atualizado (Updated)
• Ele é removido (Unmounted)

🎣 O que são Lifecycle Hooks?

• Funções que o Vue chama automaticamente em cada estágio
• Permitem rodar nosso código no momento certo
• Todos começam com o prefixo on...

🏗️ O estágio do Setup

• É o código que roda quando o arquivo é lido
• O HTML ainda NÃO existe no navegador!
• Variáveis são preparadas, mas o DOM está inacessível

🌅 onMounted

• Disparado logo após o componente aparecer na tela
• Cenário Ideal:
• Iniciar chamadas de API
• Configurar Timers (setInterval)
• Interagir com bibliotecas externas (Chart.js, Maps)

🔄 onUpdated

• Roda toda vez que a interface física é alterada
• Útil para debugar ou sincronizar com o scroll da página após novos dados aparecerem

🌑 onUnmounted

• Disparado pouco antes do componente ser destruído
• Cenário Fundamental:
• Parar Timers (clearInterval)
• Remover Event Listeners globais (window.add...)
• Evitar vazamentos de memória (Memory Leaks)

📊 Linha do Tempo Visual

stateDiagram-v2
    [*] --> Setup: Escrita das refs
    Setup --> mounted: onMounted
    mounted --> updated: onUpdated
    updated --> mounted
    mounted --> unmounted: onUnmounted
    unmounted --> [*]

🛠️ Exemplo de Uso (API)

onMounted(async () => {
  const res = await fetch('...')
  dados.value = await res.json()
})

🛠️ Exemplo de Uso (Timer)

let timer
onMounted(() => {
  timer = setInterval(() => { ... }, 1000)
})

onUnmounted(() => {
  clearInterval(timer) // Segurança!
})

🕵️ Hooks Adicionais

• onBeforeMount: Quase lá...
• onBeforeUnmount: Último adeus...
• onErrorCaptured: Capturar erros de filhos

🧪 Por que onUnmounted é CRÍTICO?

• Se você criar um setInterval e o componente sumir...
• O INTERVALO CONTINUA RODANDO!
• Isso vai deixando o computador do usuário lento com o tempo

🔌 Composables (Hooks reusáveis)

• Podemos extrair lógicas de ciclo de vida para arquivos separados
• Ex: useMouseTracker.js com seu próprio onMounted e onUnmounted

🏗️ Desafio da Aula

• Criar um componente que exiba o tamanho da janela do navegador
• Atualizar o valor no evento window.onresize
• Garantir que o evento seja removido ao destruir o componente

🏁 Resumo

• onMounted: O componente nasceu no site
• onUnmounted: Hora de limpar a casa
• Ciclo de vida ajuda a controlar a performance e recursos

🏁 Dúvidas?

Obrigado! Próxima aula: Projeto Prático I (Task Manager).