0Pricing
Vue Academy · Lezione

Approfondimento sulla funzione h()

Firma h(type, props, children), struttura VNode, rendering di tipi di componente dinamici.

Approfondimento sulla funzione h() è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 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’è la funzione h

La funzione h (abbreviazione di hyperscript) crea direttamente in JavaScript nodi del DOM virtuale (VNode). È la base in cui vengono compilati i template. Una funzione di rendering restituisce il risultato della chiamata a h.

La firma

h accetta tre argomenti: h(type, props, children). Il type può essere una stringa contenente il nome di un tag, un oggetto componente o un componente funzionale. props è un oggetto contenente attributi, props ed eventi. children può essere testo, un array di VNode o un oggetto slots.

import { h } from "vue";

h(type, props, children);

Un elemento semplice

Passando il nome di un tag e un oggetto props con class si produce un elemento con stile. Il terzo argomento in questo caso è semplice contenuto testuale.

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

Props e attributi

Tutto viene inserito nello stesso oggetto props: attributi HTML, props del DOM, class, style e listener degli eventi. Vue determina a quale categoria appartiene ciascun elemento durante il patching.

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

Array di elementi figli

Quando un elemento ha più elementi figli, passi un array di VNode come terzo argomento. Ogni elemento figlio è a sua volta il risultato di una chiamata a h.

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

Passare null senza props

Se un elemento non ha props, è possibile passare null (o un oggetto vuoto) come secondo argomento, così children rimane nel terzo slot.

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

Renderizzare un componente

L'argomento type può essere un componente importato. Le props passate diventano le props di quel componente.

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

Passare gli slot come oggetto

Per passare il contenuto degli slot a un componente, l'argomento children diventa un oggetto di funzioni. Ogni chiave è il nome di uno slot e ogni valore è una funzione che restituisce VNodes o testo.

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

Slot nominati e scoped

Più slot corrispondono semplicemente a più chiavi. Gli scoped slot ricevono le proprie props come argomento della funzione.

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

Listener degli eventi

Gli eventi sono props con il prefisso on seguito dal nome dell'evento in PascalCase. Un listener per il click è la prop onClick.

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

Restituire h da una funzione di rendering

All'interno di setup è possibile restituire una funzione di rendering invece di un template. Viene chiamata a ogni nuovo rendering per produrre l'albero di VNode.

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

Verifica rapida

Come si passa il contenuto dello slot predefinito a un componente usando h?

Riepilogo

La funzione h crea VNode con h(type, props, children). type è un tag o un componente, props contiene gli attributi e i listener onEvent, mentre children può essere testo, un array di VNode oppure un oggetto di slot composto da funzioni. Le funzioni di rendering restituiscono chiamate a h e vengono eseguite a ogni nuovo rendering.

Domande Frequenti

La lezione «Approfondimento sulla funzione h()» è gratuita?

Sì — il testo completo di «Approfondimento sulla funzione h()» è 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 «Approfondimento sulla funzione h()»?

Firma h(type, props, children), struttura VNode, rendering di tipi di componente dinamici. 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 1 di 4.

Quanto tempo richiede la lezione «Approfondimento sulla funzione h()»?

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

  1. Approfondimento sulla funzione h()
  2. JSX in Vue 3 con Vite
  3. Componenti dinamici con le funzioni render
  4. Pattern dei componenti higher-order (HOC)
← Torna a Vue Academy