What is h in Vue's render method?

                                                       

If you have been in contact with vue for a while, then you may have encountered the rendering method in your app file--in the latest version It is a default value in the CLI and is in the main.js file:

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

or if you use render Method (function), may use JSX:

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

Maybe you want to know, what is h used for? What does it mean? h stands for hyperscript. It is part of HTML and stands for Hypertext Markup Language: when we are working on a script, it has become a convention to use it to replace virtual DOM nodes. This definition is also used in other framework documents. Details here Cycle.js.

On this issue, Evan described:

Hyperscript itself represents a "script that generates HTML structure"

abbreviated as h is Because it's easier to type. He also describes this at Frontend Masters in his advanced Vue workshop.

Really, you can think of it as short for createElement. This will be a long form:

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

If we replace it with h, then we can do this:

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

... which can then be shortened by using ES6 :

render: h => h (App)

The Vue version requires up to three parameters:

render(h) {
  return h('p', {}, [...])
}

• The first is the type of element (shown here as p).

• The second one is the data object. We mainly include here: props, attrs, dom props, class and style.

• The third one is a group of child nodes. We will then nest the calls and ultimately return a virtual DOM node tree.

More in-depth information can be found in the Vue Guide.

Name hyperscript may confuse some people because hyperscript is actually the name of a library (not updated these days) that actually has a small ecosystem. In this case, we're not talking about that specific implementation.

Hope this clears things up for those who are confused!

Recommended tutorial: "JS"

The above is the detailed content of What is h in Vue's render method?. For more information, please follow other related articles on the PHP Chinese website!