Render function syntax in Vue - Step-by-Step Execution

Concept Flow - Render function syntax

Define render function

↓

Call h() to create VNode

↓

Return VNode from render

↓

Vue renders VNode to DOM

↓

DOM updates visible on page

The render function creates virtual nodes (VNodes) using h(), returns them, and Vue renders these to update the DOM.

Execution Sample

Vue

import { h } from 'vue';
export default {
  render() {
    return h('button', { onClick: () => alert('Clicked!') }, 'Click me');
  }
};

This code defines a render function that creates a button element with a click alert.

Execution Table

Step	Action	Evaluation	Result
1	Call render()	render() called	Function starts
2	Call h('button', props, children)	h() creates VNode	VNode for <button> created
3	Return VNode	VNode returned from render	VNode ready for Vue
4	Vue renders VNode	VNode converted to DOM	<button> element created in DOM
5	User clicks button	onClick event triggers	Alert 'Clicked!' shown

💡 Render function completes by returning VNode; Vue updates DOM accordingly.

Variable Tracker

Variable	Start	After render call	After h() call	Final
VNode	undefined	VNode object for button	VNode object for button	VNode object returned

Key Moments - 3 Insights

Why do we use h() inside the render function?

h() creates a virtual node (VNode) representing the element; see execution_table step 2 where h() creates the VNode.

What does the render function return?

It returns the VNode created by h(), as shown in execution_table step 3.

How does Vue update the actual page from the render function?

Vue takes the returned VNode and renders it to the real DOM, as in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the result of calling h() in step 2?

A An alert popup

B A real DOM button element

C A virtual node (VNode) representing the button element

D Undefined

💡 Hint

Check the 'Result' column in step 2 of the execution_table.

At which step does Vue convert the VNode into a real DOM element?

A Step 4

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Action' and 'Result' columns in the execution_table for step 4.

If the render function returned null instead of a VNode, what would happen?

A Vue would throw an error immediately

B Vue would render nothing in place of the component

C Vue would render a default element

D The button would still appear

💡 Hint

Consider what Vue does with the returned value from render() as shown in the execution_table.

Concept Snapshot

Render function syntax in Vue:
- Define a render() method in your component
- Use h(tag, props, children) to create VNodes
- Return the VNode from render()
- Vue renders VNode to real DOM
- Enables full control over rendering without templates

Full Transcript

In Vue, the render function is a method that returns virtual nodes (VNodes) created by calling the helper function h(). When Vue calls render(), it executes the function, which calls h() to create a VNode representing an element, such as a button. The render function returns this VNode. Vue then takes this VNode and renders it into the real DOM, updating the visible page. For example, a render function returning h('button', { onClick: () => alert('Clicked!') }, 'Click me') creates a button element with a click event. When the user clicks the button, the alert shows. This process allows developers to control rendering programmatically without using templates.