Wat doet de ‘h’ staat voor in Vue de render methode?

0
36

Als je bezig bent met Vue voor een tijdje, kunt u zijn gekomen over deze manier van renderen van uw app — dit is de standaardinstelling in de nieuwste versie van de CLI in main.js:

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

Of, als je een render functie, mogelijk zijn om te profiteren van JSX:

Vue.component(‘jsx-voorbeeld’, {
render (h) {
terug <div id=”foo”>bar</div>
}
})

Je kunt je afvragen, wat heeft dat te h? Wat staat het voor? De h staat voor hyperscript. Het is een riff van HTML betekent Hypertext Markup Language: aangezien we te maken met een script, is het verdrag in de virtuele DOM implementaties gebruik van deze vervanging. Deze definitie is ook aan de orde in de documentatie van de andere kaders. Hier is het, bijvoorbeeld, in Cycle.js.

In dit probleem, Evan beschrijft dat:

Hyperscript zelf staat voor “script genereert HTML-structuren”

Dit is ingekort tot h omdat het makkelijker te typen. Ook beschrijft hij het een beetje meer in zijn Geavanceerde Vue workshop on Frontend Masters.

Echt, je kunt het zien als een afkorting voor createElement. Hier zou de lange vorm:

render: functie (createElement) {
terug createElement(App);
}

Als we dat vervangen met een h, dan gaan we eerst aankomt bij:

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

…die kunnen dan ingekort worden met het gebruik van de ES6:

render: h => h (Ong)

De Vue versie duurt maximaal drie argumenten:

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

  1. De eerste is het type van het element (hier weergegeven als div).
  2. De tweede is het data-object. Wij nest een aantal velden, waaronder: rekwisieten, attrs, dom rekwisieten, klasse en stijl.
  3. De derde is een scala van onderliggende knooppunten. We hebben dan geneste aanroepen en uiteindelijk weer een boom van virtuele DOM nodes.

Er is meer in-diepte-informatie in de Vue Gids hier.

De naam hyperscript kan verwarrend zijn voor sommige mensen, gezien het feit dat hyperscript is eigenlijk de naam van een bibliotheek (wat niet bijgewerkt voor deze dagen) en het is eigenlijk een klein ecosysteem. In dit geval, we praten niet over die specifieke uitvoering.

Hoop dat wist dingen voor degenen die nieuwsgierig zijn!

SHARE
Previous articleVerzenden Druppels
Next articleÖverföra Droppar