Wofür steht das „h“ in der Render-Methode von Vue?

Wenn Sie schon länger mit Vue arbeiten, sind Sie vielleicht auf diese Art, Ihre App zu rendern, gestoßen – dies ist der Standard in der neuesten Version des CLI, in main.js

new Vue({
 render: h => h(App)
}).$mount('#app')

Oder, wenn Sie eine Render-Funktion verwenden, vielleicht um JSX zu nutzen

Vue.component('jsx-example', {
  render (h) {
    return <div id="foo">bar</div>
  }
})

Sie fragen sich vielleicht: Was macht dieses h? Wofür steht es? Das h steht für hyperscript. Es ist eine Abwandlung von HTML, was für Hypertext Markup Language steht: Da wir es mit einem Skript zu tun haben, ist es in Implementierungen des virtuellen DOM üblich geworden, diese Ersetzung zu verwenden. Diese Definition wird auch in der Dokumentation anderer Frameworks behandelt. Hier ist sie zum Beispiel in Cycle.js.

In diesem Issue beschreibt Evan, dass

Hyperscript selbst steht für „Skript, das HTML-Strukturen generiert“

Dies wird zu h verkürzt, weil es einfacher zu tippen ist. Er beschreibt es auch etwas ausführlicher in seinem Advanced Vue Workshop auf Frontend Masters.

Wirklich, Sie können es sich als Kurzform für createElement vorstellen. Hier wäre die Langform

render: function (createElement) {
  return createElement(App);
}

Wenn wir das durch ein h ersetzen, kommen wir zuerst zu

render: function (h) {
  return h(App);
}

...was dann durch die Verwendung von ES6 gekürzt werden kann zu

render: h => h (App)

Die Vue-Version benötigt bis zu drei Argumente

render(h) {
  return h('div', {}, [...])
}

1. Das erste ist der Typ des Elements (hier als div gezeigt).
2. Das zweite ist das Datenobjekt. Wir verschachteln hier einige Felder, darunter: Props, Attrs, Dom Props, Klasse und Stil.
3. Das dritte ist ein Array von Kindknoten. Wir werden dann verschachtelte Aufrufe haben und schließlich einen Baum von virtuellen DOM-Knoten zurückgeben.

Es gibt detailliertere Informationen im Vue Guide hier.

Der Name hyperscript kann für manche Leute potenziell verwirrend sein, da hyperscript tatsächlich der Name einer Bibliothek ist (die heutzutage nicht mehr aktualisiert wird) und ein kleines Ökosystem hat. In diesem Fall sprechen wir nicht über diese spezielle Implementierung.

Ich hoffe, das klärt die Dinge für die Neugierigen auf!