Pular para conteúdo

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).