In Vue, What Is The Relationship Of Template, Render, VNode?

During development of a vue project, and got some doubt regarding template / render / VNode. After reading the document https://vuejs.org/v2/guide/syntax.html, and google search, s

Solution 1:

What is h from h => h(App)

render: h => h(App) is shorthand for:

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

where h is shorthand for the createElement argument; a function to compile the template into a VNode

https://github.com/vuejs-templates/webpack-simple/issues/29#issuecomment-312902539

---

What is the type of h's return value?

Since h is the createElement function, h here returns a VNode

https://vuejs.org/v2/guide/render-function.html#createElement-Arguments

---

Does the template always compile to a VNode or a function that returns a VNode

You can do either, just depending on your implementation. If you use Vue.compile, then you can compile the template into a render function:

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

https://vuejs.org/v2/api/#Vue-compile

If you use the createElement function, then you compile the template directly into a VNode.

Solution 2:

1) h is an alias to the createElement function as explained at the end of this paragraph.

2) h, or better said the createElement function returns a virtual node, or VNode, a Vue internal representation of a regular HTML element, like a div. You can find more details in the documentation too.

3) Templates compile to the same render functions you were talking about. Here the details. So basically, templates are an high level abstraction to create low level VNodes.

Solution 3:

It's arrow function - shorthand version (ES6 syntax)

Full function:

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

So h is alias for createElement

See: https://vuejs.org/v2/guide/render-function.html

Especially: https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM