Aula 17 - Composition API Avançada e Composables Reutilizáveis 💚

📑 1. Fundamentos Teóricos & Análise Técnica

A introdução da Composition API no Vue 3 representou uma mudança fundamental de paradigma em relação à antiga Options API. Enquanto a Options API organizava o código por opções técnicas (data, methods, computed, watch), o que fragmentava o raciocínio em componentes extensos, a Composition API permite agrupar o código por preocupação lógica (Logical Concern).

O coração dessa arquitetura é o conceito de Composables — funções convenientes que encapsulam e reutilizam lógica com estado reativo através das APIs fundamentais do Vue (ref, reactive, computed, watchEffect).

Boas práticas essenciais na criação de Composables de alto nível: 1. Convenção de Nomenclatura: Nomeação prefixada com use (ex: useAsyncData, useEventListener). 2. Argumentos Flexíveis com toValue(): Capacidade de aceitar tanto valores literais quanto ref ou getters, tornando o composable adaptável a diferentes cenários. 3. Cleanup Automático: Desconexão de listeners e cancelamento de timers vinculados automaticamente ao ciclo de vida do componente chamador via onScopeDispose() ou onUnmounted().

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph LR
    subgraph OptionsAPI ["Options API (Fragmentação Lógica)"]
        Data["data: { search, users, filters }"]
        Methods["methods: { fetchUsers(), applyFilter() }"]
        Watch["watch: { search() }"]
    end
    subgraph CompositionAPI ["Composition API (Coesão por Feature)"]
        Feature1["useSearch() -> { search, results }"]
        Feature2["usePagination() -> { page, nextPage }"]
        Feature3["useUserAuth() -> { user, login }"]
    end
    style OptionsAPI fill:#ffebee,stroke:#c62828
    style CompositionAPI fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Agrupamento por Preocupação Lógica: Manutenção facilitada e leitura contínua de blocos de regras de negócio. - Desempacotamento de Refs: Uso de unref() e toValue() para máxima flexibilidade nos parâmetros. - Isolamento de Efeitos Colaterais: Garantia de que nenhum event listener persista na memória após a destruição do componente. - Suporte Perfeito a TypeScript: Inferência natural de tipos sem dependência das mágicas de contexto do objeto this.

🛠️ 2. Implementação Prática em Vue 3 Composition API e Script Setup

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// useMouseTracker.ts (Composable Reutilizável com Auto-Cleanup)
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouseTracker() {
  const x = ref(0);
  const y = ref(0);

  function updateCoordinates(event: MouseEvent) {
    x.value = event.clientX;
    y.value = event.clientY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', updateCoordinates);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', updateCoordinates);
  });

  return { x, y };
}

💡 Análise Passo a Passo do Código

1. Declaração Reativa: ref(0) cria referências reativas encapsuladas que serão expostas aos componentes.
2. Vinculação de Ciclo de Vida: onMounted e onUnmounted garantem que o listener exista apenas enquanto o componente estiver na tela.
3. Retorno de Objeto de Refs: Retornar { x, y } permite desestruturar as propriedades no componente consumidor mantendo a reatividade.

🎯 3. Próximos Passos & Sequência Didática