Composables: funções de composição reutilizáveis
Extraia lógica reativa para funções composable prefixadas com use, compartilhe-as entre componentes e entenda como diferem dos mixins.
Composables: funções de composição reutilizáveis é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são composables?
Um composable é uma função que usa ganchos da Composition API para encapsular e reutilizar lógica com estado. Eles são o equivalente dos mixins na Composition API — mas sem conflitos de nomes nem dependências ocultas.
Um composable básico
Extraia a lógica reativa para uma função que comece com use. Ela pode usar ref, computed, watch e ganchos do ciclo de vida — assim como setup().
// useCounter.ts
import { ref } from 'vue';
export function useCounter(initial = 0) {
const count = ref(initial);
const increment = () => count.value++;
const decrement = () => count.value--;
const reset = () => (count.value = initial);
return { count, increment, decrement, reset };
}
// Usage in any component:
const { count, increment } = useCounter(10);Composable com ganchos do ciclo de vida
Composables podem registrar ganchos do ciclo de vida. Os ganchos são executados em relação ao componente que chama o composable.
// useOnlineStatus.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useOnlineStatus() {
const isOnline = ref(navigator.onLine);
const update = () => (isOnline.value = navigator.onLine);
onMounted(() => {
window.addEventListener('online', update);
window.addEventListener('offline', update);
});
onUnmounted(() => {
window.removeEventListener('online', update);
window.removeEventListener('offline', update);
});
return { isOnline };
}Composable com operações assíncronas (useFetch)
Composables funcionam muito bem para buscar dados de forma assíncrona — encapsule o padrão de carregamento/erro/dados.
// useFetch.ts
export function useFetch<T>(url: MaybeRef<string>) {
const data = ref<T | null>(null);
const loading = ref(true);
const error = ref<string | null>(null);
watchEffect(async (onCleanup) => {
const controller = new AbortController();
onCleanup(() => controller.abort());
loading.value = true;
error.value = null;
try {
const res = await fetch(unref(url), { signal: controller.signal });
data.value = await res.json();
} catch (e: any) {
if (e.name !== 'AbortError') error.value = e.message;
} finally { loading.value = false; }
});
return { data, loading, error };
}Aceitando refs como parâmetros
Composables podem aceitar valores simples ou refs como argumentos usando MaybeRef<T> (= T | Ref<T>) e unref() para acessar o valor.
import type { MaybeRef } from 'vue';
import { unref } from 'vue';
function useDouble(num: MaybeRef<number>) {
return computed(() => unref(num) * 2);
}Composables versus mixins
Mixins injetam propriedades no componente sem uma origem clara. Composables são explícitos — você vê exatamente o que um composable fornece pelo valor retornado. Vários composables podem ser usados sem conflitos de nomes.
Compartilhando estado entre componentes
Se um composable chama ref() dentro de si, cada componente que o chama recebe seu próprio estado. Para compartilhar estado entre componentes, chame ref() no escopo do módulo (fora da função do composable).
// Shared state (module-level):
const sharedCount = ref(0);
export function useSharedCounter() {
// All callers share the same sharedCount
return { count: sharedCount, increment: () => sharedCount.value++ };
}Bibliotecas de composables
VueUse (vueuse.org) fornece mais de 200 composables prontos para uso: useLocalStorage, useFetch, useDark, useIntersectionObserver e muitos outros. Sempre verifique o VueUse antes de escrever algo do zero.
Testando composables
Teste composables chamando-os dentro de um pequeno componente de teste ou usando o padrão mountedApp dos utilitários de teste do Vue. Vitest integra-se bem ao sistema de reatividade do Vue.
Convenções de nomenclatura para composables
Sempre use o prefixo use (useAuth, useFetch, useMediaQuery). Mantenha cada composable concentrado em uma única responsabilidade. Evite composables que façam muitas coisas não relacionadas.
Organização dos composables
Crie uma pasta composables/. Use um arquivo por composable. Um arquivo de índice reexporta todos os composables. Isso reflete a forma como os hooks personalizados são organizados em projetos React.
Verificação rápida
Qual é a principal vantagem dos composables em relação aos mixins do Vue?
Recapitulação: composables do Vue
Um composable é uma função com prefixo use que chama ganchos da Composition API. Cada chamador recebe um estado independente, a menos que você use refs no nível do módulo. Aceite refs ou valores com MaybeRef + unref. Registre ganchos do ciclo de vida dentro dos composables. Verifique o VueUse antes de escrever o seu próprio. Valores de retorno explícitos evitam a poluição do espaço de nomes típica dos mixins.
Perguntas Frequentes
A aula “Composables: funções de composição reutilizáveis” é grátis?
Sim — o texto completo de “Composables: funções de composição reutilizáveis” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Composables: funções de composição reutilizáveis”?
Extraia lógica reativa para funções composable prefixadas com use, compartilhe-as entre componentes e entenda como diferem dos mixins. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Composables: funções de composição reutilizáveis”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- ref() e reactive()
- computed() e watch()
- A função setup() e script setup
- Composables: funções de composição reutilizáveis