Exercícios: Aula 07 - Ciclo de Vida e Hooks 🔄

1. O que é o Ciclo de Vida?

Descreva o que acontece em um componente Vue desde o momento em que ele é importado até o momento em que o usuário navega para outra página e ele desaparece da tela.

2. O Hooks onMounted

Qual a utilidade do hook onMounted? Por que não é recomendado fazer chamadas de inicialização de timers ou APIs diretamente no corpo do <script setup> sem o hook?

3. O Hook onUnmounted

Crie um componente que inicie um setInterval no onMounted que imprima uma mensagem no console a cada 1 segundo. Use o hook onUnmounted para limpar esse timer (clearInterval). Por que essa limpeza é fundamental para o navegador?

4. Reatividade vs Lifecycle

Suponha que um dado mude e a tela se atualize. Qual hook do ciclo de vida é disparado APÓS essa atualização visual ocorrer? Cite um exemplo de uso para esse hook.

5. Desafio: Relógio Digital Reativo

Crie um componente de relógio que exiba as horas, minutos e segundos atualizados em tempo real. - Use onMounted para iniciar o relógio. - Use onUnmounted para pará-lo. - Use uma ref para armazenar o horário atual. - Formate a exibição para que sempre tenha dois dígitos (ex: 09:05:01).