¿Qué significa la ‘h’ en el método de renderizado de Vue? | Programar Plus

0

Si ha estado trabajando con Vue durante un tiempo, es posible que haya encontrado esta forma de representar su aplicación: esta es la predeterminada en la última versión de la CLI, en main.js:

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

O, si está utilizando una función de procesamiento, posiblemente para aprovechar JSX:

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

Usted se estará preguntando, ¿qué significa eso? h ¿hacer? Que significa? El h representa hiperíndice. Es un riff de HTML, lo que significa lenguaje de marcado de hipertexto: dado que estamos tratando con un script, se ha convertido en una convención en las implementaciones DOM virtuales usar esta sustitución. Esta definición también se aborda en la documentación de otros marcos. Aquí está, por ejemplo, en Cycle.js.

En este número, Evan describe que:

Hyperscript en sí mismo significa “script que genera estructuras HTML”

Esto se acorta a h porque es más fácil de escribir. También lo describe un poco más en su taller de Advanced Vue sobre Frontend Masters.

Realmente, puedes pensar que es la abreviatura de createElement. Esta sería la forma larga:

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

Si reemplazamos eso con un h, entonces primero llegamos a:

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

…que luego se puede acortar con el uso de ES6 para:

render: h => h (App)

La versión de Vue toma hasta tres argumentos:

render(h) {
  return h('div', {}, [...])
}
  1. El primero es el tipo del elemento (aquí se muestra como div).
  2. El segundo es el objeto de datos. Anidamos algunos campos aquí, incluidos: props, attrs, dom props, class y style.
  3. El tercero es una matriz de nodos secundarios. Luego tendremos llamadas anidadas y eventualmente devolveremos un árbol de nodos DOM virtuales.

Hay más información detallada en la Guía Vue aquí.

El nombre hiperíndice puede ser potencialmente confuso para algunas personas, dado que el hiperíndice es en realidad el nombre de una biblioteca (lo que no se actualiza en estos días) y en realidad tiene un pequeño ecosistema. En este caso, no estamos hablando de esa implementación en particular.

¡Espero que aclare las cosas para aquellos que tienen curiosidad!

(Visited 6 times, 1 visits today)