Vue Academy · Lección

Patrón de componentes de orden superior (HOC)

Envoltorio de componentes con HOC, transferencia de props y slots y elección entre HOC y composable

Patrón de componentes de orden superior (HOC) es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Qué es un componente de orden superior

Un componente de orden superior (HOC) es una función que recibe un componente y devuelve un componente nuevo que lo envuelve. Añade comportamientos transversales, como registro de actividad, comprobaciones de autenticación o carga de datos, sin modificar el componente original.

La firma de la función

Por convención, un HOC se nombra con el prefijo with. Recibe el componente envuelto y devuelve uno mejorado.

function withLogging(Wrapped) {
  // return a new component
}

Devolver defineComponent

El componente nuevo se crea con defineComponent. Su función setup renderiza el componente envuelto mediante h.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

Reenviar atributos

Para que el wrapper sea transparente, distribuya ctx.attrs sobre el componente envuelto. Así se transmiten class, style y cualquier prop no reconocida.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

Reenviar slots

Pase el objeto slots del wrapper como argumento children para que el componente envuelto siga recibiendo todo el contenido de slot del consumidor.

return () => h(Wrapped, attrs, slots);

Añadir comportamiento transversal

El objetivo principal es inyectar comportamiento. En este caso, registramos el montaje y el desmontaje alrededor del componente envuelto.

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);
    }
  });
}

Usar el HOC

Envuelva cualquier componente y use el resultado como un componente normal en las plantillas o en otras funciones de renderizado.

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

Asignar un nombre al wrapper

Establezca un name para que el wrapper sea identificable en Vue DevTools. Componer el nombre del componente envuelto mantiene el árbol legible.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

Inyectar props adicionales

Un HOC puede proporcionar props adicionales al componente envuelto, como un conjunto de datos obtenido o un indicador de funcionalidad.

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC frente a composables

Los composables comparten lógica y suelen ser la opción preferida en Vue 3. Los HOC son más adecuados cuando debe envolver el renderizado de un componente existente que no puede editar, o para estandarizar un límite, como el manejo de errores.

Componer varios HOC

Como cada HOC devuelve un componente, se pueden componer anidándolos. Aplíquelos de modo que el más externo se aplique al final.

const Enhanced = withLogging(withUser(BaseTable));

Comprobación rápida

Para que un wrapper HOC sea transparente, ¿qué debe reenviar al componente envuelto?

Resumen

Un HOC como withLogging(Wrapped) devuelve un nuevo defineComponent cuyo setup renderiza el componente envuelto con h(Wrapped, attrs, slots), y añade comportamiento transversal, como registro de actividad o props inyectadas. Reenvíe attrs y slots para mantener la transparencia, y prefiera composables cuando solo necesite compartir lógica.

Preguntas frecuentes

¿La lección «Patrón de componentes de orden superior (HOC)» es gratis?

Sí — el texto completo de «Patrón de componentes de orden superior (HOC)» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Patrón de componentes de orden superior (HOC)»?

Envoltorio de componentes con HOC, transferencia de props y slots y elección entre HOC y composable Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Patrón de componentes de orden superior (HOC)»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Análisis profundo de la función h()
JSX en Vue 3 con Vite
Componentes dinámicos con funciones render
Patrón de componentes de orden superior (HOC)

← Volver a Vue Academy