Die Funktion h() im Detail
Signatur von h(type, props, children), VNode-Struktur und das Rendern dynamischer Komponententypen
Die Funktion h() im Detail ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist die h-Funktion
Die Funktion h (kurz für Hyperscript) erstellt virtuelle DOM-Knoten (VNodes) direkt in JavaScript. Sie ist die Grundlage, auf die Templates herunterkompiliert werden. Eine Render-Funktion gibt das Ergebnis eines Aufrufs von h zurück.
Die Signatur
h akzeptiert drei Argumente: h(type, props, children). Der type kann eine Zeichenfolge mit einem Tagnamen, ein Komponentenobjekt oder eine Funktionskomponente sein. props ist ein Objekt mit Attributen, Props und Ereignissen. children kann Text, ein Array von VNodes oder ein Slots-Objekt sein.
import { h } from "vue";
h(type, props, children);Ein einfaches Element
Wenn Sie einen Tagnamen und ein Props-Objekt mit class übergeben, wird ein formatiertes Element erstellt. Das dritte Argument ist hier einfacher Textinhalt.
import { h } from "vue";
h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>Props vs. Attribute
Alles kommt in dasselbe Props-Objekt: HTML-Attribute, DOM-Props, class, style und Event-Listener. Vue entscheidet beim Patchen, wo jedes Element hingehört.
h("input", {
type: "text",
value: "hello",
class: "field",
placeholder: "Type here"
});Arrays von Children
Wenn ein Element mehrere untergeordnete Elemente hat, übergeben Sie als drittes Argument ein Array von VNodes. Jedes untergeordnete Element ist selbst ein Aufruf von h.
h("ul", null, [
h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>null für keine Props übergeben
Wenn ein Element keine Props hat, können Sie null (oder ein leeres Objekt) als zweites Argument übergeben, damit die Children an dritter Stelle bleiben.
h("ul", null, [
h("li", null, "first"),
h("li", null, "second")
]);Eine Komponente rendern
Das Type-Argument kann eine importierte Komponente sein. Die übergebenen Props werden zu den Props dieser Komponente.
import { h } from "vue";
import MyComponent from "./MyComponent.vue";
h(MyComponent, { title: "Hello" });Slots als Objekt übergeben
Um Slot-Inhalte an eine Komponente zu übergeben, wird das Children-Argument zu einem Objekt aus Funktionen. Jeder Schlüssel ist ein Slot-Name, und jeder Wert ist eine Funktion, die VNodes oder Text zurückgibt.
h(MyComponent, { title: "Hello" }, {
default: () => "slot content"
});Benannte und bereichsgebundene Slots
Mehrere Slots sind einfach mehrere Schlüssel. Bereichsgebundene Slots erhalten ihre Props als Funktionsargument.
h(MyComponent, null, {
header: () => h("h1", null, "Title"),
default: (props) => h("p", null, props.text)
});Event-Listener
Events sind Props mit dem Präfix on, gefolgt vom Event-Namen in PascalCase. Ein Click-Listener ist die Prop onClick.
h("button", {
onClick: () => console.log("clicked")
}, "Press me");h aus einer Render-Funktion zurückgeben
Innerhalb von setup können Sie anstelle eines Templates eine Render-Funktion zurückgeben. Sie wird bei jedem erneuten Rendern aufgerufen, um den VNode-Baum zu erzeugen.
import { h, ref } from "vue";
export default {
setup() {
const count = ref(0);
return () => h("button", {
onClick: () => count.value++
}, "Count: " + count.value);
}
};Kurztest
Wie übergeben Sie einer Komponente mithilfe von h den Inhalt des Default-Slots?
Zusammenfassung
Die Funktion h erstellt VNodes mit h(type, props, children). Type ist ein Tag oder eine Komponente, Props enthalten Attribute und onEvent-Listener, und Children sind Text, ein Array aus VNodes oder ein Slot-Objekt aus Funktionen. Render-Funktionen geben h-Aufrufe zurück und werden bei jedem erneuten Rendern ausgeführt.
Häufig gestellte Fragen
Ist die Lektion „Die Funktion h() im Detail“ kostenlos?
Ja — der vollständige Text von „Die Funktion h() im Detail“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Die Funktion h() im Detail“?
Signatur von h(type, props, children), VNode-Struktur und das Rendern dynamischer Komponententypen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Die Funktion h() im Detail“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Funktion h() im Detail
- JSX in Vue 3 mit Vite
- Dynamische Komponenten mit render-Funktionen
- Muster der Higher-Order Components (HOC)