Exercícios 13 - Ciclo de Vida e Performance ⏳

🟢 Básicos

1. Mount: O que acontece quando o código é colocado dentro da função onMount?
2. Destroy: Em qual momento a função onDestroy é executada?

🟡 Intermediários

1. Memória: Por que é perigoso deixar um setInterval rodando sem limpá-lo no onDestroy?
2. Atualização: Diferencie as funções beforeUpdate e afterUpdate. Em que cenário você usaria cada uma?

🔴 Desafio

1. Relógio com Alarme:
   • Crie um componente que exiba o horário atual (HH:MM:SS) e atualize a cada segundo.
   • Use onMount para iniciar o cronômetro.
   • Adicione uma variável alarme (string no formato HH:MM).
   • Use um bloco reativo $: { ... } para verificar se o horário atual é igual ao alarme. Se for, mostre um alerta na tela.
   • Garanta que o intervalo seja limpo no onDestroy.
   • Como você otimizaria esse componente para que ele não consumisse processamento desnecessário se o usuário mudar de aba? (Pesquise sobre visibilitychange).

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Mount
function solucaoExercicio() {
    console.log("Executando validação de: Ciclo de Vida e Performance ⏳");
    return true;
}

solucaoExercicio();

// Solução de referência para: Destroy
function solucaoExercicio() {
    console.log("Executando validação de: Ciclo de Vida e Performance ⏳");
    return true;
}

solucaoExercicio();