Aula 07 – Ciclo de Vida e Hooks 🔄

Todo componente Vue passa por uma série de etapas desde o momento em que é criado até ser destruído. Essas etapas são chamadas de Lifecycle Hooks.

🏗️ O Ciclo de Vida

Imagine o componente como um ser vivo: ele nasce (mount), cresce/muda (update) e morre (unmount).

graph TD
    A[Setup] --> B[onMounted]
    B --> C{Dado mudou?}
    C -- Sim --> D[onUpdated]
    D --> C
    C -- Fechou página --> E[onUnmounted]

🎣 Hooks mais comuns

`onMounted`

Chamado quando o componente está pronto na tela. É o lugar perfeito para buscar dados de uma API ou configurar timers.

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log("O componente apareceu na tela! 🚀")
  // Iniciar chamada de API aqui
})
</script>

`onUnmounted`

Chamado logo antes do componente ser removido do DOM. Ótimo para limpar "lixo", como parar intervalos de tempo ou remover event listeners globais.

<script setup>
import { onMounted, onUnmounted } from 'vue'

let intervalId

onMounted(() => {
  intervalId = setInterval(() => console.log("Ping!"), 1000)
})

onUnmounted(() => {
  clearInterval(intervalId) // Limpeza necessária para não travar o navegador
})
</script>

🧠 Por que usar Hooks?

Organização

Os hooks permitem que você execute código em momentos estratégicos, garantindo que sua aplicação seja performática e não tenha vazamentos de memória (memory leaks).

🧱 Organização de Pastas Profissional

À medida que o projeto cresce, a pasta src/ deve ser organizada: * src/components/: Componentes genéricos (Botões, Inputs). * src/views/: Componentes que representam páginas inteiras. * src/services/: Arquivos JavaScript para chamadas de API.

💻 Prática Sugerida

Crie um componente que mostre um relógio digital que atualiza a cada segundo usando setInterval. Lembre-se de usar o onUnmounted para parar o relógio se o usuário sair da página.

📝 Exercício

Em qual hook devemos fazer requisições para o servidor?
O que acontece se não limparmos um setInterval no onUnmounted?
Qual hook é disparado toda vez que um dado reativo exibido na tela é alterado?

🚀 Próxima Aula: Chegou a hora do nosso primeiro Projeto Prático Integrador! Vamos construir um Task Manager do zero.