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.

Practice

1. What is the primary purpose of the h function in Vue?

easy

A. To define CSS styles for components

B. To directly manipulate the DOM elements

C. To fetch data from an API

D. To create virtual nodes representing elements or components

Solution

1. Step 1: Understand the role of h in Vue

   The h function is used to create virtual nodes (vnodes) which represent elements or components in Vue's virtual DOM.

2. Step 2: Differentiate from other functions

   It does not manipulate the real DOM directly, fetch data, or style components. Its main role is to build the virtual DOM structure.

3. Final Answer:

   To create virtual nodes representing elements or components -> Option D

4. Quick Check:

   h function = create virtual nodes [OK]

Hint: Remember: h builds virtual nodes, not real DOM [OK]

Common Mistakes:

• Confusing h with direct DOM manipulation
• Thinking h fetches data
• Assuming h styles components

2. Which of the following is the correct syntax to create a div element with the h function and a class of "container"?

easy

A. h('div', ['class', 'container'])

B. h('div', { class: 'container' })

C. h('div', 'class', 'container')

D. h('div', { 'className': 'container' })

Solution

1. Step 1: Recall the h function signature

   The h function takes the tag name as the first argument and an object of props as the second argument.

2. Step 2: Identify correct props syntax

   Vue uses class (not className) as the key for CSS classes in the props object.

3. Final Answer:

   h('div', { class: 'container' }) -> Option B

4. Quick Check:

   h(tag, props) with class key = A [OK]

Hint: Props are an object; use { class: 'name' } [OK]

Common Mistakes:

• Using 'className' instead of 'class'
• Passing class as separate string arguments
• Using array instead of object for props

3. What will be the rendered output of this Vue render function snippet?

return h('ul', null, [
  h('li', null, 'Apple'),
  h('li', null, 'Banana'),
  h('li', null, 'Cherry')
])

medium

A. AppleBananaCherry

B. AppleBananaCherry

C. AppleBananaCherry

D. Error: Children must be strings

Solution

1. Step 1: Understand the structure created by h

   The outer h creates a ul element with an array of li children nodes.

2. Step 2: Recognize the children rendering

   Each li vnode contains a string child representing the fruit name, so the final HTML is a list with three li items.

3. Final Answer:

   <ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul> -> Option A

4. Quick Check:

   h with array children = nested elements [OK]

Hint: Array children create nested elements inside parent [OK]

Common Mistakes:

• Thinking children array concatenates text
• Expecting error for array children
• Missing the parent <ul> element

4. Identify the error in this usage of the h function:

return h('button', { onclick: () => alert('Clicked!') }, 'Click me')

medium

A. The event name should be lowercase: 'onclick'

B. The event handler should be passed as 'onClick' but as a string

C. The event handler should be passed as 'onClick' with capital C

D. The event handler should be passed as 'onClick' but inside an array

Solution

1. Step 1: Recall Vue event listener naming in h

   Vue expects event listeners in props to be prefixed with 'on' and camelCase event name, e.g., 'onClick'.

2. Step 2: Identify the incorrect casing

   The code uses 'onclick' with lowercase 'c', which Vue does not recognize as an event listener.

3. Final Answer:

   The event handler should be passed as 'onClick' with capital C -> Option C

4. Quick Check:

   Event props use camelCase event names [OK]

Hint: Use camelCase event names like 'onClick' in props [OK]

Common Mistakes:

• Using lowercase event names
• Passing event handler as string
• Wrapping handler in array unnecessarily

5. How would you use the h function to create a ul list from this array of fruits, but only include fruits with names longer than 5 characters?

const fruits = ['Apple', 'Banana', 'Fig', 'Cherry']

hard

A. h('ul', null, fruits.filter(f => f.length > 5).map(f => h('li', null, f)))

B. h('ul', null, fruits.map(f => f.length > 5 ? h('li', null, f) : f))

C. h('ul', null, fruits.map(f => h('li', null, f.length > 5)))

D. h('ul', null, fruits.filter(f => f.length > 5))

Solution

1. Step 1: Filter fruits by length

   Use filter to keep only fruits with names longer than 5 characters.

2. Step 2: Map filtered fruits to li vnodes

   Use map to convert each filtered fruit into an li vnode with the fruit name as child.

3. Step 3: Pass the array of li vnodes as children to ul

   This creates a ul with only the desired fruits as list items.

4. Final Answer:

   h('ul', null, fruits.filter(f => f.length > 5).map(f => h('li', null, f))) -> Option A

5. Quick Check:

   Filter then map to
6. nodes = A [OK]

Hint: Filter first, then map to <li> nodes inside h [OK]

Common Mistakes:

• Mapping without filtering includes unwanted items
• Passing booleans or nulls as children
• Passing raw strings array without wrapping in <li>