Usage of h() in vue3

Introduction

According to Vue’s official documentation, h() it is a rendering function used to create virtual DOM nodes. When building a page with HTML tags in a Vue project, the final result will be converted into a vnode. The h() function creates a vnode directly, allowing for more flexibility in constructing component rendering logic and improving performance.

Syntax

The h() rendering function has three parameters, of which the second and third are optional:

• type: The type of node to create, which can be an HTML tag, component, or function (functional component).
• props (optional): An object containing properties for the node, passed as a prop.
• children (optional): Child nodes that can be strings, arrays, or other vnode objects.

// Basic usage example
function h(
  type: string | Component,
  props?: object | null,
  children?: Children | Slot | Slots
): VNode

// Example usage
h('div', { id: 'foo' }, 'Hello!');

Parameter Explanation

1. type:

• HTML tag: If there type is a string, it will be parsed as an HTML tag.
• Component: If the type is an object or function, it will be parsed as a Vue component.