O que são composables e como você escreve um?

Question

O que são composables e como você escreve um?

Accepted Answer

Um **composable** é uma função reutilizável que encapsula **lógica com estado** usando a Composition API. Por convenção, ele é nomeado `useXxx` e retorna estado reativo mais funções — permitindo que você compartilhe lógica entre componentes sem mixins ou repetição. ## Escrevendo um composable ```js // composables/useCounter.js import { ref, computed } from "vue"; export function useCounter(initial = 0) { const count = ref(initial); // encapsulated reactive state const double = computed(() => count.value * 2); function increment() { count.value++; } function reset() { count.value = initial; } return { count, double, increment, reset }; // expose the API } ``` ## Usando-o em qualquer componente ```vue ``` Cada componente que chama `useCounter()` obtém seu próprio `count` **isolado** — composables criam estado fresco por chamada, diferentemente de uma variável compartilhada no nível do módulo. ## Um exemplo realista: useFetch com ciclo de vida ```js import { ref, onUnmounted } from "vue"; export function useMousePosition() { const x = ref(0), y = ref(0); const update = (e) => { x.value = e.pageX; y.value = e.pageY; }; window.addEventListener("mousemove", update); // set up onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup! return { x, y }; } ``` Composables podem usar lifecycle hooks, watchers e outros composables — e crucialmente, eles **encapsulam sua própria limpeza** (`onUnmounted`), então os consumidores não precisam lembrar disso. ## Composables vs mixins (a forma antiga) ```text Mixins (Vue 2): merged into the component — unclear where properties came from, naming collisions between mixins, implicit dependencies Composables: explicit imports + return values — clear sources, no collisions, can be composed, fully typed in TypeScript ``` ## Por que isso importa Composables são a forma *idiomática* de extrair e reutilizar lógica com estado no Vue 3 — busca de dados, manipulação de formulários, rastreamento de mouse/scroll, debouncing, etc. Eles resolvem o problema de reutilização de lógica de forma limpa (explícita, sem colisões, composável, amigável ao TypeScript), onde os mixins do Vue 2 falharam. São a razão principal pela qual as equipes adotam a Composition API: a lógica compartilhada se torna uma função simples e testável, em vez de código disperso ou duplicado.