elioclimaco
3/16/2019 - 1:27 AM

Vue: Explicación para render: h => h(App)

You know, a major gripe I have with Vue is the documentation gap at the intermediate level. The docs provide excellent beginner examples, and then you use the CLI templates and find more evolved syntax, naming/structure conventions despite Vue being "unopinionated" (to a fault, IMO), and complex Webpack configurations with limited comments/explanations. Linus dismissively links to the docs, but they don't really address the spirit of the OP's question.

The answer (for anyone else who comes across this), is that render: h => h(App) is shorthand for:

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

Which can be shortened to:

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

Which can again be shortened to (with h being an alias to createElement as noted above):

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

Which is then shortened further to (using ES6 "fat arrow" syntax):

render: h => h(App);

As noted by Evan in this issue reply, the meaning of h comes from hyperscript:

    It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".

Lastly, I really appreciate the Elixir community's philosophy that poor documentation and unintuitive error messages are considered bugs.