Padrão de componentes de ordem superior (HOC)
Encapsulamento de componentes com HOCs, encaminhamento de props e slots e quando usar HOC em vez de composable.
Padrão de componentes de ordem superior (HOC) é uma aula grátis de Vue 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 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 é um componente de ordem superior
Um componente de ordem superior (HOC) é uma função que recebe um componente e retorna um novo componente que o envolve. Ele adiciona comportamentos transversais, como registro, verificações de autenticação ou carregamento de dados, sem modificar o original.
A assinatura da função
Por convenção, um HOC recebe um nome com o prefixo with. Ele recebe o componente envolvido e retorna um componente aprimorado.
function withLogging(Wrapped) {
// return a new component
}Retornando defineComponent
O novo componente é criado com defineComponent. Sua função setup renderiza o componente envolvido por meio de h.
import { defineComponent, h } from "vue";
function withLogging(Wrapped) {
return defineComponent({
setup(props, ctx) {
return () => h(Wrapped, props, ctx.slots);
}
});
}Encaminhando atributos
Para que o invólucro seja transparente, espalhe ctx.attrs sobre o componente envolvido. Isso repassa classe, estilo e quaisquer propriedades não reconhecidas.
setup(props, { attrs, slots }) {
return () => h(Wrapped, { ...attrs }, slots);
}Encaminhando áreas de conteúdo
Passe o objeto slots do invólucro como argumento de filhos para que o componente envolvido continue recebendo todo o conteúdo de área fornecido pelo consumidor.
return () => h(Wrapped, attrs, slots);Adicionando comportamento transversal
O objetivo é injetar comportamento. Aqui, registramos a montagem e a desmontagem ao redor do componente envolvido.
import { onMounted, onUnmounted } from "vue";
function withLogging(Wrapped) {
return defineComponent({
setup(props, { attrs, slots }) {
onMounted(() => console.log("mounted"));
onUnmounted(() => console.log("unmounted"));
return () => h(Wrapped, attrs, slots);
}
});
}Usando o HOC
Envolva qualquer componente e use o resultado como um componente normal em modelos ou em outras funções de renderização.
import BaseTable from "./BaseTable.vue";
const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any componentDando nome ao invólucro
Defina um name para que o invólucro seja identificável no Vue DevTools. Compor o nome do componente envolvido mantém a árvore legível.
return defineComponent({
name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
setup(props, ctx) { /* ... */ }
});Injetando propriedades extras
Um HOC pode fornecer propriedades adicionais ao componente envolvido, como um conjunto de dados obtido ou um sinalizador de funcionalidade.
function withUser(Wrapped) {
return defineComponent({
setup(props, { attrs, slots }) {
const user = inject("currentUser");
return () => h(Wrapped, { ...attrs, user }, slots);
}
});
}HOC versus funções composáveis
As funções composáveis compartilham lógica e geralmente são preferidas no Vue 3. Os HOCs são melhores quando você precisa envolver a renderização de um componente existente que não pode editar ou padronizar um limite, como o tratamento de erros.
Compondo vários HOCs
Como cada HOC retorna um componente, eles são compostos por aninhamento. Aplique-os de dentro para fora, deixando o mais externo por último.
const Enhanced = withLogging(withUser(BaseTable));Verificação rápida
Para que um invólucro HOC seja transparente, o que ele precisa encaminhar ao componente envolvido?
Recapitulação
Um HOC como withLogging(Wrapped) retorna um novo defineComponent cuja função setup renderiza o componente envolvido com h(Wrapped, attrs, slots), adicionando comportamento transversal, como registro ou propriedades injetadas. Encaminhe atributos e áreas de conteúdo para manter a transparência e prefira funções composáveis quando precisar apenas compartilhar lógica.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Padrão de componentes de ordem superior (HOC)” é grátis?
Sim — o texto completo de “Padrão de componentes de ordem superior (HOC)” é 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 “Padrão de componentes de ordem superior (HOC)”?
Encapsulamento de componentes com HOCs, encaminhamento de props e slots e quando usar HOC em vez de composable. 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 4 de 4.
Quanto tempo leva a aula “Padrão de componentes de ordem superior (HOC)”?
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
- A função h() em detalhes
- JSX no Vue 3 com Vite
- Componentes dinâmicos com funções render
- Padrão de componentes de ordem superior (HOC)