h function for creating vnodes in Vue - Step-by-Step Execution

Concept Flow - h function for creating vnodes

Call h(tag, props, children)

↓

Create vnode object

↓

Assign tag, props, children

↓

Return vnode

↓

VNode used by Vue to render DOM

The h function is called with tag, props, and children to create a vnode object that Vue uses to build the DOM.

Execution Sample

Vue

import { h } from 'vue';
const vnode = h('button', { id: 'btn' }, 'Click me');

Creates a vnode for a button element with an id and text content.

Execution Table

Step	Action	Input	VNode Property Set	Result
1	Call h function	tag='button', props={id:'btn'}, children='Click me'	tag='button'	VNode created with tag 'button'
2	Assign props	{id:'btn'}	props={id:'btn'}	VNode props set
3	Assign children	'Click me'	children='Click me'	VNode children set
4	Return vnode	VNode object	tag, props, children set	VNode ready for rendering

💡 VNode returned with all properties set for Vue to render

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
vnode	undefined	{tag:'button'}	{tag:'button', props:{id:'btn'}}	{tag:'button', props:{id:'btn'}, children:'Click me'}	{tag:'button', props:{id:'btn'}, children:'Click me'}

Key Moments - 2 Insights

Why do we pass 'button' as a string to h instead of an actual HTML element?

Because h creates a virtual node description, not a real DOM element. The string 'button' tells Vue what tag to create later. See execution_table step 1.

Can children be a string or must it be an array?

Children can be a string for text content or an array for multiple child vnodes. Here, it's a string as shown in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the vnode's 'props' after step 2?

A 'Click me'

B undefined

C {id:'btn'}

D null

💡 Hint

Check the 'VNode Property Set' column at step 2 in the execution_table

At which step is the vnode's children property set?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'VNode Property Set' column for when children is assigned

If we change children from 'Click me' to ['Click', ' me'], how would the vnode's children property change?

A It becomes an array of strings

B It stays a single string

C It becomes null

D It throws an error

💡 Hint

Children can be a string or an array as explained in key_moments and shown in variable_tracker

Concept Snapshot

h(tag, props?, children?) creates a vnode object.
- tag: string or component
- props: object with attributes
- children: string or array of vnodes
Returns a vnode Vue uses to render DOM.
Used in render functions or JSX alternatives.

Full Transcript

The h function in Vue is used to create virtual nodes, or vnodes, which describe what the DOM should look like. When you call h with a tag name like 'button', optional props like an id, and children like text, it returns an object representing that element. This vnode is not a real DOM element yet but a description Vue uses to build the real DOM later. The process starts by calling h, then setting the tag property, then props, then children, and finally returning the vnode. Children can be simple text or an array of other vnodes. This function is essential for render functions and helps Vue efficiently update the UI.