Vue Academy · leksjon

Grundig gjennomgang av h()-funksjonen

Signaturen h(type, props, children), VNode-strukturen og rendering av dynamiske komponenttyper.

Leksjon 1 av 413 trinn

Grundig gjennomgang av h()-funksjonen er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva er h-funksjonen

h-funksjonen (forkortelse for hyperscript) oppretter virtuelle DOM-noder (VNodes) direkte i JavaScript. Den er grunnlaget som maler kompileres til. En render-funksjon returnerer resultatet av å kalle h.

Signaturen

h tar tre argumenter: h(type, props, children). type kan være en taggnavnstreng, et komponentobjekt eller en funksjonell komponent. props er et objekt med attributter, props og hendelser. children er tekst, en matrise med VNodes eller et slots-objekt.

import { h } from "vue";

h(type, props, children);

Et enkelt element

Hvis De sender inn et taggnavn og et props-objekt med class, opprettes et formatert element. Det tredje argumentet her er vanlig tekstinnhold.

import { h } from "vue";

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

Props kontra attributter

Alt legges i det samme props-objektet: HTML-attributter, DOM-props, class, style og hendelseslyttere. Vue finner ut hvor hver enkelt del hører hjemme under patching.

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

Matriser med children

Når et element har flere children, sender De inn en matrise med VNodes som det tredje argumentet. Hvert child er selv et kall til h.

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

Sende null når det ikke finnes props

Hvis et element ikke har props, kan De sende null (eller et tomt objekt) som det andre argumentet, slik at children fortsatt får plass som det tredje argumentet.

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

Rendre en komponent

type-argumentet kan være en importert komponent. Props som sendes inn, blir props for denne komponenten.

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

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

Sende slots som et objekt

For å sende slot-innhold til en komponent blir children-argumentet et objekt med funksjoner. Hver nøkkel er et slot-navn, og hver verdi er en funksjon som returnerer VNodes eller tekst.

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

Navngitte og scoped slots

Flere slots er ganske enkelt flere nøkler. Scoped slots mottar props som funksjonsargumentet.

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

Hendelseslyttere

Hendelser er props med prefikset on etterfulgt av hendelsesnavnet i PascalCase. En klikklytter er prop-en onClick.

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

Returnere h fra en render-funksjon

Inne i setup kan De returnere en render-funksjon i stedet for en mal. Den kalles ved hver ny rendring for å lage VNode-treet.

import { h, ref } from "vue";

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

Hurtigsjekk

Hvordan sender De standardinnholdet for en slot til en komponent ved hjelp av h?

Besvar den i den interaktive leksjonen

Oppsummering

h-funksjonen bygger VNodes med h(type, props, children). type er en tagg eller komponent, props inneholder attributter og onEvent-lyttere, og children er tekst, en array med VNodes eller et slots-objekt med funksjoner. Render-funksjoner returnerer kall til h og kjøres ved hver nye rendring.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Grundig gjennomgang av h()-funksjonen» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Grundig gjennomgang av h()-funksjonen», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Grundig gjennomgang av h()-funksjonen»?

Signaturen h(type, props, children), VNode-strukturen og rendering av dynamiske komponenttyper. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Grundig gjennomgang av h()-funksjonen»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Grundig gjennomgang av h()-funksjonen
JSX i Vue 3 med Vite
Dynamiske komponenter med render-funksjoner
Mønsteret Higher-Order Components (HOC)

← Tilbake til Vue Academy