Shulou(Shulou.com)06/01 Report--

This article will explain in detail what the h function in vue3.0 means. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

In vue3.0, the h function is the createElement method in vue. The purpose of this function is to create a virtual dom, track dom changes, and implement the process of showing how template is rendered into html.

This article operating environment: windows10 system, Vue3 version, DELL G3 computer.

What is the h function in vue3.0 1. Function

The h function creates a node that shows how template is rendered to html. Because vue rendering to the page is packaged into a template string through loader, the h function is also rendered to html through strings.

The h function is the createElement method in vue. The function of this function is to create a virtual dom and track dom changes.

Second, the template in app.vue is represented by h function

App.vue

Main.js

Import {createApp, defineComponent, h} from 'vue'import HelloWorld from'. / components/HelloWorld.vue'// defineComponent defines a component / / h to create a node that shows how template is rendered to html. Because vue rendering to the page is rendered by loader packaged into a template string, the h function is also rendered to html by string / / the first parameter node type p is dom native node. Need to identify / / the second parameter node attribute attribute p node attribute / / the child node of the third parameter node internal node (child content) / / import App from'. / App.vue'const img = require ('. / assets/logo.png') / / eslint-disable-line// need to cancel the check because require is not supported in ts Const App = defineComponent ({render () {return h ('id: 'app'}, [h (' img', {alt: 'vue.logo', src: img,}), h (HelloWorld, {msg:' Welcome to Your Vue.js + TypeScript App', name:'Li Si', age: 15) Sex: 'male',}),])},}) third, h function source code

IV. Remarks

You can see from the source code that the h function is actually createVNode, so you can also refer to createVNode instead of h.

This is the end of this article on "what is the meaning of h function in vue3.0". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.