Vad gör ‘h’ står för i Vue render-metoden?

0
25

Om du har arbetat med Vue för ett tag, du kanske har stött på detta sätt för att göra din app — detta är standardinställningen i den senaste versionen av CLI, main.js:

nya Vue({
gör: h => h(App)
}).$mount(‘#app’)

Eller, om du använder en render funktion, möjligen för att dra fördel av JSX:

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

Du kanske undrar, vad har att h? Vad står det för? H står för hyperscript. Det är ett riff av HTML, som betyder Hypertext Markup Language: eftersom vi har att göra med ett manus, det har blivit en konvention i virtuella DOM implementationer för att använda denna ersättning. Denna definition är också att tas upp i den dokumentation av andra ramar. Här är det, till exempel i Cycle.js.

I denna fråga, Evan beskrivs som:

Hyperscript själv står för “script som genererar HTML-strukturer”

Detta är ett förkortat h eftersom det är lättare att skriva. Han beskriver också det lite mer i hans Avancerade Vue workshop på Frontend Masters.

Verkligen, du kan se det som att vara kort för createElement. Här skulle vara den långa formen:

gör: funktion (createElement) {
tillbaka createElement(App);
}

Om vi ersätta den med ett h, då vi först anlände till:

gör: funktion (h) {
tillbaka h(App);
}

…som sedan kan förkortas med hjälp av ES6 till:

gör: h => h (App)

De Vue versionen tar upp till tre argument:

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

  1. Den första är en typ av element (här visas div).
  2. Den andra är de uppgifter om objektet. Vi bo i vissa områden här, bland annat: rekvisita, attrs, dom rekvisita, klass och stil.
  3. Den tredje är en mängd av noder barn. Vi kommer då att få kapslade samtal och så småningom tillbaka ett träd av virtuella DOM-noder.

Det finns mer ingående information i Vue Guide här.

Namnet hyperscript kan potentiellt vara förvirrande för vissa människor, med tanke på det faktum att hyperscript är egentligen namnet på ett bibliotek (vad som inte är uppdaterade i dessa dagar) och den har faktiskt ett litet ekosystem. I det här fallet, vi pratar inte om att särskilt genomförandet.

Hoppas att rensar upp saker för dem som är nyfikna!