Hva betyr ” h ” står for i Vue er render metoden?

0
30

Hvis du har arbeidet med Vue for en stund, du kan ha kommet over denne måten å gjengi din app — dette er standard i den nyeste versjonen av CLI, i main.js:

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

Eller, hvis du bruker en render funksjon, muligens for å dra nytte av JSX:

Vue.komponent(‘jsx-eksempel’, {
render (h) {
retur <div id=”foo”>bar</div>
}
})

Du lurer kanskje på, hva som gjør at h gjøre? Hva vil det stå for? H står for hyperscript. Det er en riff av HTML, som betyr Hypertext Markup Language: siden vi arbeider med et manus, det er blitt convention i virtuelle DOM implementeringer å bruke denne erstatningen. Denne definisjonen er også tatt opp i dokumentasjonen av andre rammeverk som godt. Her er det, for eksempel i Cycle.js.

I denne utgaven, Evan beskriver som:

Hyperscript selv står for “script som genererer HTML-strukturer”

Dette er forkortet til h fordi det er enklere å skrive. Han beskriver også det en litt mer i sin Avanserte Vue workshop på Frontend-Mestere.

Virkelig, du kan tenke på det som å være kort for createElement. Her ville være den lange formen:

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

Hvis vi erstatte den med en h, da vi først kommer på:

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

…som kan bli forkortet med bruk av ES6 til:

render: h => h (App)

De Vue versjonen tar opp til tre argumenter:

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

  1. Den første er en type element (her vist som div).
  2. Den andre er data objekt. Vi hekker noen av feltene her, inkludert: rekvisitter, attrs, dom rekvisitter, klasse og stil.
  3. Den tredje er en rekke barn noder. Vi vil da har nestede samtaler og til slutt tilbake et tre av virtuelle DOM noder.

Det er mer utfyllende informasjon i de Vue Guide her.

Navnet hyperscript kan potensielt være forvirrende for noen mennesker, gitt det faktum at hyperscript er faktisk navnet på et bibliotek (det som ikke er oppdatert disse dager), og det har faktisk et lite økosystem. I dette tilfellet, vi snakker ikke om en bestemt gjennomføring.

Håper på at det klarner opp ting for de som er nysgjerrige!