Home > Web Front-end > JS Tutorial > What is h in Vue's render method?

What is h in Vue's render method?

Guanhui
Release: 2020-06-16 17:57:24
forward
3401 people have browsed it

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')
Copy after login

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

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

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);
}
Copy after login

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

render: function (h) {
  return h(App);
}
Copy after login

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

render: h => h (App)
Copy after login

The Vue version requires up to three parameters:

render(h) {
  return h('p', {}, [...])
}
Copy after login
  • 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!

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template