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.

Practice

1. What is the main purpose of the h function in Vue render functions?

easy

A. To create virtual DOM elements in JavaScript

B. To define CSS styles for components

C. To fetch data from an API

D. To register a new Vue component

Solution

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

   The h function is used to create virtual DOM nodes in Vue's render functions.

2. Step 2: Differentiate from other Vue tasks

   Creating elements is different from styling, fetching data, or registering components.

3. Final Answer:

   To create virtual DOM elements in JavaScript -> Option A

4. Quick Check:

   h creates elements [OK]

Hint: Remember: h means 'hyperscript' for elements [OK]

Common Mistakes:

• Confusing h with CSS or data fetching
• Thinking h registers components
• Assuming h is a lifecycle hook

2. Which of the following is the correct syntax for a simple Vue render function returning a <div> with text 'Hello'?

easy

A. render() { return h('div', { text: 'Hello' }) }

B. render() { return Hello }

C. render() { return h(div, 'Hello') }

D. render() { return h('div', 'Hello') }

Solution

1. Step 1: Check the correct use of h function

   The h function takes a tag name as a string and children as the second argument.

2. Step 2: Identify correct syntax

   render() { return h('div', 'Hello') } correctly uses h('div', 'Hello'). render() { return
   Hello } uses JSX which is not default Vue render syntax. render() { return h(div, 'Hello') } misses quotes around 'div'. render() { return h('div', { text: 'Hello' }) } incorrectly uses an object with a text property.

3. Final Answer:

   render() { return h('div', 'Hello') } -> Option D

4. Quick Check:

   Tag as string + children string = correct syntax [OK]

Hint: Tag names must be strings in h calls [OK]

Common Mistakes:

• Omitting quotes around tag names
• Using JSX syntax without setup
• Passing text inside an object instead of as child

3. What will the following Vue render function output?

render() { return h('ul', [ h('li', 'One'), h('li', 'Two') ]) }

medium

A. OneTwo

B. OneTwo

C. OneTwo

D. SyntaxError

Solution

1. Step 1: Understand nested h calls

   The outer h creates a ul element. The children are an array of two li elements created by inner h calls.

2. Step 2: Translate to HTML output

   This produces a ul with two li children: 'One' and 'Two'.

3. Final Answer:

   <ul><li>One</li><li>Two</li></ul> -> Option C

4. Quick Check:

   Nested h creates nested elements [OK]

Hint: Arrays in h create multiple children elements [OK]

Common Mistakes:

• Thinking children array concatenates text
• Missing that h returns elements, not strings
• Assuming syntax error from array usage

4. Identify the error in this Vue render function:

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

medium

A. Event handler key should be 'onClick' with capital C

B. Event handler key should be 'onclick' all lowercase

C. Event handler key should be 'onClick' but Vue expects 'onClick' as camelCase

D. Event handler key should be 'onClick' but Vue expects 'onClick' as 'onClick'

Solution

1. Step 1: Recall Vue event handler naming in render functions

   Vue expects event handlers in render functions to use camelCase keys prefixed with 'on', like 'onClick'.

2. Step 2: Identify the incorrect key

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

3. Final Answer:

   Event handler key should be 'onClick' with capital C -> Option A

4. Quick Check:

   Vue event keys are camelCase 'onClick' [OK]

Hint: Use camelCase event keys like 'onClick' in render functions [OK]

Common Mistakes:

• Using lowercase event keys instead of camelCase
• Confusing Vue event keys with JSX syntax
• Assuming 'onclick' works like HTML attributes

5. How can you use a Vue render function to conditionally render a <span> with text 'Active' only if a signal isActive is true, otherwise render <span> with 'Inactive'?

hard

A. render() { if (isActive) return h('span', 'Active'); else return h('span', 'Inactive') }

B. render() { return h('span', isActive() ? 'Active' : 'Inactive') }

C. render() { return h('span', { text: isActive ? 'Active' : 'Inactive' }) }

D. render() { return h('span', isActive ? 'Active' : 'Inactive') }

Solution

1. Step 1: Understand signal usage in Vue 3.4+

   Signals are functions that return current value, so isActive() gets the boolean.

2. Step 2: Use conditional operator inside render

   The ternary operator inside h sets the text child based on isActive().

3. Step 3: Check other options

   render() { if (isActive) return h('span', 'Active'); else return h('span', 'Inactive') } uses isActive directly without calling, which is incorrect for signals. render() { return h('span', { text: isActive ? 'Active' : 'Inactive' }) } incorrectly passes text inside an object. render() { return h('span', isActive ? 'Active' : 'Inactive') } uses isActive without calling.

4. Final Answer:

   render() { return h('span', isActive() ? 'Active' : 'Inactive') } -> Option B

5. Quick Check:

   Call signal function to get value [OK]

Hint: Call signals as functions: use isActive() not isActive [OK]

Common Mistakes:

• Using signal variable without calling as function
• Passing text inside an object instead of as child
• Using if-else without return in render