Was ist h in der Rendermethode von Vue?

                                                       

Wenn Sie schon länger mit Vue in Kontakt stehen, ist Ihnen möglicherweise die rendering-Methode in Ihrer App-Datei begegnet – in der neuesten Version von CLI Es ist ein Standardwert und befindet sich in der main.js-Datei:

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

Oder, wenn Sie die render-Methode (Funktion) verwenden, können Sie JSX verwenden:

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

Vielleicht Sie Möchten Sie wissen, wofür h verwendet wird? Was bedeutet es? h steht für Hyperskript . Es ist Teil von HTML und steht für Hypertext Markup Language: Wenn wir an einem Skript arbeiten, ist es zur Konvention geworden, es zum Ersetzen virtueller DOM-Knoten zu verwenden. Diese Definition wird auch in anderen Rahmendokumenten verwendet. Details hier Cycle.js.

Zu diesem Thema beschrieb Evan:

Hyperscript selbst bedeutet „Skript, das eine HTML-Struktur generiert“

abgekürzt als h, weil es einfacher zu tippen ist . Dies beschreibt er auch bei Frontend Masters in seinem fortgeschrittenen Vue-Workshop.

Wirklich, man könnte es sich als Kurzform für createElement vorstellen. Dies wird eine Langform sein:

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

Wenn wir es durch h ersetzen, können wir Folgendes tun:

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

... was dann mit ES6 gekürzt werden kann:

render: h => h (App)

Die Vue-Version erfordert bis zu drei Parameter:

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

• Der erste ist der Typ des Elements (hier als p dargestellt).

• Das zweite ist das Datenobjekt. Wir schließen hier hauptsächlich ein: Requisiten, Attribute, Dom-Requisiten, Klasse und Stil.

• Der dritte ist eine Gruppe von untergeordneten Knoten. Anschließend verschachteln wir die Aufrufe und geben letztendlich einen virtuellen DOM-Knotenbaum zurück.

Ausführlichere Informationen finden Sie im Vue Guide.

Der Name Hyperscript kann für manche Leute verwirrend sein, da Hyperscript eigentlich der Name einer Bibliothek ist (heutzutage nicht aktualisiert) und es sich tatsächlich um ein kleines Ökosystem handelt. In diesem Fall sprechen wir nicht über diese spezifische Implementierung.

Ich hoffe, das klärt diejenigen auf, die verwirrt sind!

Empfohlenes Tutorial: „JS“

Das obige ist der detaillierte Inhalt vonWas ist h in der Rendermethode von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!