🧩 Exercícios Práticos: Ciclo de Vida na Composition API

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 06.1 — Carregamento de Dados Iniciais no onMounted()

Contexto: Carregamento de Dados Iniciais no onMounted() no contexto de Ciclo de Vida na Composition API.

Requisitos de Execução:

  1. Disparar chamada assíncrona de busca de dados no hook onMounted.

Resultado Esperado

Dados carregados automaticamente após inserção do componente no DOM.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_06_1_SeuNome
  2. Envie na tarefa: Atividade Cap 06 - Ciclo de Vida na Composition API
🔑 Gabarito de Código & Solução Comentada 
<!-- LifecycleMounted.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const carregando = ref(true);
const dados = ref<string[]>([]);

onMounted(async () => {
  // Simula fetch
  dados.value = ['Item 1', 'Item 2'];
  carregando.value = false;
});
</script>

<template>
  <div v-if="carregando">Carregando...</div>
  <ul v-else><li v-for="d in dados" :key="d">{{ d }}</li></ul>
</template>

🔍 Nível 2: Prática

Problema 06.2 — Limpeza de Recursos no onUnmounted()

Contexto: Limpeza de Recursos no onUnmounted() no contexto de Ciclo de Vida na Composition API.

Requisitos de Execução:

  1. Registrar listener de redimensionamento de janela window.addEventListener('resize') e remover no onUnmounted.

Resultado Esperado

Event listener removido na destruição do componente prevenindo vazamento de memória.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_06_2_SeuNome
  2. Envie na tarefa: Atividade Cap 06 - Ciclo de Vida na Composition API
🔑 Gabarito de Código & Solução Comentada 
<!-- WindowResizeListener.vue -->
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const larguraJanela = ref(window.innerWidth);
const atualizar = () => { larguraJanela.value = window.innerWidth; };

onMounted(() => window.addEventListener('resize', atualizar));
onUnmounted(() => window.removeEventListener('resize', atualizar));
</script>

<template>
  <p>Largura da Tela: {{ larguraJanela }}px</p>
</template>

⚡ Nível 3: Integração

Problema 06.3 — Inspeção do DOM Atualizado com onUpdated() e nextTick()

Contexto: Inspeção do DOM Atualizado com onUpdated() e nextTick() no contexto de Ciclo de Vida na Composition API.

Requisitos de Execução:

  1. Utilizar await nextTick() após alterar estado para rolar lista automaticamente até o último elemento inserido.

Resultado Esperado

Scroll da página executado exatamente após a atualização do DOM pelo Vue.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_06_3_SeuNome
  2. Envie na tarefa: Atividade Cap 06 - Ciclo de Vida na Composition API
🔑 Gabarito de Código & Solução Comentada 
<!-- AutoScrollList.vue -->
<script setup lang="ts">
import { ref, nextTick } from 'vue';

const mensagens = ref<string[]>([]);
const listaRef = ref<HTMLDivElement | null>(null);

const enviarMensagem = async (texto: string) => {
  mensagens.value.push(texto);
  await nextTick();
  if (listaRef.value) {
    listaRef.value.scrollTop = listaRef.value.scrollHeight;
  }
};
</script>

🏆 Nível 4: Desafio Corporativo

Problema 06.4 — Tratamento de Erros em Árvores de Componentes com onErrorCaptured()

Contexto: Tratamento de Erros em Árvores de Componentes com onErrorCaptured() no contexto de Ciclo de Vida na Composition API.

Requisitos de Execução:

  1. Capturar exceções não-tratadas de componentes filhos no onErrorCaptured exibindo tela de fallback.

Resultado Esperado

Erro em componente filho interceptado sem travar a aplicação inteira.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_06_4_SeuNome
  2. Envie na tarefa: Atividade Cap 06 - Ciclo de Vida na Composition API
🔑 Gabarito de Código & Solução Comentada 
<!-- ErrorBoundary.vue -->
<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue';

const erro = ref<string | null>(null);

onErrorCaptured((err) => {
  erro.value = err.message;
  return false; // Previne propagação do erro
});
</script>

<template>
  <div v-if="erro" class="error-box">Falha no módulo: {{ erro }}</div>
  <slot v-else />
</template>