Vue Academy · Aula

O que caracteriza um bom composable

Convenção de nomenclatura (useName), encapsulamento de estado reativo e retorno de refs em vez de valores brutos.

O que caracteriza um bom composable é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

O que é uma função de composição

Uma função de composição é uma função que usa a API de composição do Vue para encapsular e reutilizar lógica com estado. Ela é a alternativa do Vue 3 às combinações de comportamentos — mais limpa, explícita e compatível com tipos.

A convenção do prefixo use

Por convenção, as funções reutilizáveis recebem o prefixo use: useCounter, useFetch, useMouse. Isso indica imediatamente que a função contém lógica reativa.

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

Retorne referências, não valores brutos

Retorne referências (ou estado reativo) para que os consumidores continuem reativos ao desestruturar. Retornar count.value devolveria um instantâneo que nunca é atualizado.

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

Desestruturação segura

Como retorna referências, o consumidor pode desestruturar livremente sem perder a reatividade. Cada referência mantém sua própria conexão reativa.

const { count } = useCounter();
// count stays reactive after destructuring

Responsabilidade única

Uma boa função reutilizável faz uma coisa. useFetch busca dados; useLocalStorage persiste dados. Funções reutilizáveis pequenas e focadas se combinam perfeitamente para criar recursos maiores.

Compondo funções reutilizáveis

As funções reutilizáveis podem chamar outras funções reutilizáveis, criando uma lógica em camadas. Uma função useUserProfile pode usar useFetch internamente.

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

Limpando efeitos colaterais

Se uma função reutilizável adiciona ouvintes, temporizadores ou inscrições, ela deve removê-los em onUnmounted para evitar vazamentos de memória.

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

Aceite argumentos reativos

As funções reutilizáveis podem aceitar referências ou funções de obtenção como entradas e reagir a elas com watch ou watchEffect, tornando-se flexíveis.

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

Evite conflitos de nomes

Quando uma função reutilizável retorna muitos valores, exponha nomes claros. Se duas funções reutilizáveis retornarem data, renomeie-os ao desestruturar para evitar conflitos.

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

Mantenha o padrão do framework

Chame as funções reutilizáveis de forma síncrona no nível superior de setup (ou de outra função reutilizável), não dentro de condicionais ou retornos de chamada assíncronos, para que os ganchos do ciclo de vida sejam registrados corretamente.

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

Documentação e formato do retorno

Retorne um objeto previsível para que os consumidores saibam o que receberão. Um formato consistente (estado mais métodos) torna as funções reutilizáveis fáceis de aprender e usar.

return { count, increment, decrement, reset };

Verificação rápida

Por que uma função reutilizável deve retornar referências em vez de valores brutos?

Recapitulação

Você aprendeu as características de uma boa função reutilizável: o prefixo use, o retorno de referências para uma desestruturação segura, a responsabilidade única, a limpeza de efeitos colaterais em onUnmounted e a prevenção de conflitos de nomes no objeto retornado.

Perguntas Frequentes

A aula “O que caracteriza um bom composable” é grátis?

Sim — o texto completo de “O que caracteriza um bom composable” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “O que caracteriza um bom composable”?

Convenção de nomenclatura (useName), encapsulamento de estado reativo e retorno de refs em vez de valores brutos. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 1 de 4.

Quanto tempo leva a aula “O que caracteriza um bom composable”?

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 Vue Academy?

Sim. Cada aula de Vue 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

O que caracteriza um bom composable
useCounter: um composable simples
useFetch: composable de dados assíncronos
VueUse: a biblioteca de composables

← Voltar para Vue Academy