Was bedeutet das ” h ” stand für die in Vue render-Methode?

0
25

Wenn Sie schon die Arbeit mit Vue für eine Weile, haben Sie kommen über diese Art und Weise der Erbringung Ihrer app — dies ist die Standardeinstellung in der aktuellen version des CLI in main.js:

neue Vue({
render: h => h(App)
}).$mount(‘#app’)

Oder, wenn Sie eine render-Funktion, die möglicherweise zu nutzen JSX:

Vue.Komponente(‘jsx-Beispiel’, {
render (h) {
return ” <div id=”foo”>bar</div>
}
})

Sie Wundern sich vielleicht, was bedeutet, dass h tun? Für was steht er? Das h steht für hyperscript. Es ist ein riff HTML bedeutet Hypertext Markup Language: da wir es mit einem Skript, es ist zu einer Konvention in der virtuellen DOM-Implementierungen zu nutzen, diese zu ersetzen. Diese definition richtet sich auch in der Dokumentation von anderen frameworks auch. Hier ist es zum Beispiel in Cycle.js.

In dieser Ausgabe, Evan beschreibt:

Hyperscript selbst steht für “script erzeugt HTML-Strukturen”

Dies wird verkürzt zu h, weil es einfacher zu geben. Er beschreibt auch, es ein bisschen mehr in seinem Erweiterten Vue workshop auf den Frontend-Meister.

Wirklich, man kann es als Kurzform für createElement. Wäre hier die Langform:

render: function (createElement) {
zurück createElement(App);
}

Wenn wir ersetzen Sie, dass mit einem h, dann wir zuerst ankommen:

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

…die können dann gekürzt werden, mit der Verwendung von ES6 zu:

render: h => h (App)

Die Vue-version übernimmt bis zu drei Argumente:

render(h) {
return h(‘div’, {}, […])
}

  1. Die erste ist der Typ des Elements (hier gezeigt als div).
  2. Das zweite ist das Daten-Objekt. Wir nest einige Felder anderem hier: Requisiten, attrs, dom Requisiten, Klasse und Stil.
  3. Der Dritte ist ein array von Kind-Knoten. Wir haben dann geschachtelte Aufrufe und irgendwann wieder ein Baum des virtuellen DOM-Knoten.

Es gibt noch mehr in die Tiefe Informationen, die in der Vue-Guide hier.

Der name hyperscript möglicherweise verwirrend für einige Leute, angesichts der Tatsache, dass hyperscript ist eigentlich der name einer Bibliothek (welche nicht mehr aktualisiert, in diesen Tagen) und es hat tatsächlich ein kleines ökosystem. In diesem Fall, wir reden hier nicht darüber, dass insbesondere die Umsetzung.

Hoffe das klärt die Dinge für diejenigen, die neugierig sind!