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

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 08.1 — Composable useToggle para Controle de Estados Booleanos

Contexto: Composable useToggle para Controle de Estados Booleanos no contexto de Criação de Composables Reutilizáveis.

Requisitos de Execução:

  1. Criar função useToggle(initialValue) retornando ref reativa e função de alternância.

Resultado Esperado

Composable reutilizável de toggle testado com sucesso.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_1_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Criação de Composables Reutilizáveis
🔑 Gabarito de Código & Solução Comentada 
// composables/useToggle.ts
import { ref } from 'vue';

export function useToggle(valorInicial: boolean = false) {
  const ativo = ref(valorInicial);
  const toggle = () => { ativo.value = !ativo.value; };
  const ativar = () => { ativo.value = true; };
  const desativar = () => { ativo.value = false; };

  return { ativo, toggle, ativar, desativar };
}

🔍 Nível 2: Prática

Problema 08.2 — Composable useFetch com Cancelamento e Estados de Loading/Error

Contexto: Composable useFetch com Cancelamento e Estados de Loading/Error no contexto de Criação de Composables Reutilizáveis.

Requisitos de Execução:

  1. Implementar useFetch(url) retornando { data, loading, error, refetch } com tipagem genérica.

Resultado Esperado

Busca assíncrona encapsulada em composable reativo.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_2_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Criação de Composables Reutilizáveis
🔑 Gabarito de Código & Solução Comentada 
// composables/useFetch.ts
import { ref, watchEffect } from 'vue';

export function useFetch<T>(url: string) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<string | null>(null);

  watchEffect(async () => {
    loading.value = true;
    error.value = null;
    try {
      const res = await fetch(url);
      data.value = await res.json();
    } catch (e: any) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  });

  return { data, loading, error };
}

⚡ Nível 3: Integração

Problema 08.3 — Composable useLocalStorage com Sincronização Reativa

Contexto: Composable useLocalStorage com Sincronização Reativa no contexto de Criação de Composables Reutilizáveis.

Requisitos de Execução:

  1. Criar useLocalStorage(key, defaultVal) mantendo ref sincronizada com o armazenamento local.

Resultado Esperado

Estado reativo persistido automaticamente no LocalStorage.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_3_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Criação de Composables Reutilizáveis
🔑 Gabarito de Código & Solução Comentada 
// composables/useLocalStorage.ts
import { ref, watch } from 'vue';

export function useLocalStorage<T>(key: string, valorPadrao: T) {
  const armazenado = localStorage.getItem(key);
  const dado = ref<T>(armazenado ? JSON.parse(armazenado) : valorPadrao);

  watch(dado, (novoValor) => {
    localStorage.setItem(key, JSON.stringify(novoValor));
  }, { deep: true });

  return dado;
}

🏆 Nível 4: Desafio Corporativo

Problema 08.4 — Composable useDebounceFn para Rate Limiting de Eventos

Contexto: Composable useDebounceFn para Rate Limiting de Eventos no contexto de Criação de Composables Reutilizáveis.

Requisitos de Execução:

  1. Criar composable de debounce para adiar execuções de digitação na busca.

Resultado Esperado

Digitação contínua atrasada com debounce de 300ms.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_08_4_SeuNome
  2. Envie na tarefa: Atividade Cap 08 - Criação de Composables Reutilizáveis
🔑 Gabarito de Código & Solução Comentada 
// composables/useDebounceFn.ts
export function useDebounceFn<T extends (...args: any[]) => any>(fn: T, delay: number = 300) {
  let timer: any = null;
  return (...args: Parameters<T>) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos