Vue Academy · Lezione

Pattern dei componenti higher-order (HOC)

Wrapping dei componenti con HOC, inoltro di props e slot, quando usare un HOC invece di un composable.

Pattern dei componenti higher-order (HOC) è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è un componente di ordine superiore

Un componente di ordine superiore (HOC) è una funzione che riceve un componente e restituisce un nuovo componente che lo avvolge. Aggiunge comportamenti trasversali, come logging, controlli di autenticazione o caricamento di dati, senza modificare l'originale.

La firma della funzione

Per convenzione, un HOC viene denominato con il prefisso with. Riceve il componente avvolto e restituisce un componente arricchito.

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

Restituire defineComponent

Il nuovo componente viene creato con defineComponent. La sua funzione setup renderizza il componente avvolto tramite h.

import { defineComponent, h } from "vue";

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

Inoltrare gli attributi

Per rendere trasparente il wrapper, distribuire ctx.attrs sul componente avvolto. In questo modo vengono trasferiti class, style e tutte le props non riconosciute.

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

Inoltrare gli slot

Passare l'oggetto slots del wrapper come argomento children, così il componente avvolto continua a ricevere tutto il contenuto degli slot fornito dal consumer.

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

Aggiungere comportamento trasversale

Lo scopo principale è iniettare comportamento. In questo caso si registrano il montaggio e lo smontaggio attorno al componente avvolto.

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

Usare l'HOC

Avvolgere qualsiasi componente e usare il risultato come un normale componente nei template o in altre funzioni di rendering.

import BaseTable from "./BaseTable.vue";

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

Assegnare un nome al wrapper

Impostare un name affinché il wrapper sia identificabile in Vue DevTools. Comporre il nome del componente avvolto mantiene leggibile l'albero.

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

Iniettare props aggiuntive

Un HOC può fornire props aggiuntive al componente avvolto, come un insieme di dati recuperato o un flag di funzionalità.

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

HOC e composable

I composable condividono la logica e sono spesso la scelta preferibile in Vue 3. Gli HOC sono indicati quando è necessario avvolgere il rendering di un componente esistente che non si può modificare oppure standardizzare un confine, ad esempio per la gestione degli errori.

Comporre più HOC

Poiché ogni HOC restituisce un componente, gli HOC si compongono annidandoli. Applicarli partendo dal più interno e procedendo verso l'esterno.

const Enhanced = withLogging(withUser(BaseTable));

Verifica rapida

Affinché un wrapper HOC sia trasparente, cosa deve inoltrare al componente avvolto?

Riepilogo

Un HOC come withLogging(Wrapped) restituisce un nuovo defineComponent il cui setup renderizza il componente avvolto con h(Wrapped, attrs, slots), aggiungendo comportamenti trasversali come logging o props iniettate. Inoltrare attrs e slot per mantenere la trasparenza e preferire i composable quando serve soltanto condividere la logica.

Domande Frequenti

La lezione «Pattern dei componenti higher-order (HOC)» è gratuita?

Sì — il testo completo di «Pattern dei componenti higher-order (HOC)» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Pattern dei componenti higher-order (HOC)»?

Wrapping dei componenti con HOC, inoltro di props e slot, quando usare un HOC invece di un composable. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Pattern dei componenti higher-order (HOC)»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Approfondimento sulla funzione h()
JSX in Vue 3 con Vite
Componenti dinamici con le funzioni render
Pattern dei componenti higher-order (HOC)

← Torna a Vue Academy