Why render functions exist in Vue - Visual Breakdown

Concept Flow - Why render functions exist

Template Syntax

↓

Compile to Render Function

↓

Render Function Execution

↓

Create Virtual DOM

↓

Update Real DOM

↓

User Sees UI

Vue templates are compiled into render functions that create virtual DOM, which then updates the real DOM to show the UI.

Execution Sample

Vue

const render = () => {
  return h('div', { class: 'box' }, 'Hello')
}

A simple render function creates a div with class 'box' and text 'Hello'.

Execution Table

Step	Action	Input	Output	Notes
1	Call render function	No input	VNode representing <div class="box">Hello</div>	Render function returns virtual DOM node
2	Virtual DOM created	VNode	Virtual DOM tree with one div node	Virtual DOM is a lightweight JS object
3	Patch virtual DOM to real DOM	Virtual DOM tree	Real DOM updated with <div class="box">Hello</div>	Browser shows updated UI
4	User sees UI	Real DOM updated	Visible div with text 'Hello'	UI rendered on screen

💡 Render function completes and virtual DOM is synced to real DOM for display

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
render	function definition	called	returns VNode	VNode patched	UI shown
VNode	undefined	created	exists as object	used to update DOM	matches real DOM

Key Moments - 3 Insights

Why not write HTML directly instead of render functions?

Templates are easier for most, but render functions give full control and flexibility, shown in step 1 where render returns a VNode instead of HTML.

What is virtual DOM and why is it important?

Virtual DOM is a lightweight JS object representing UI (step 2). It helps Vue efficiently update only changed parts of the real DOM (step 3).

Why does Vue compile templates to render functions?

Because render functions are JavaScript, Vue can optimize and control rendering better, as seen in step 1 and 2 where template becomes a function returning VNode.

Visual Quiz - 3 Questions

Look at the execution table, what does the render function return at step 1?

A A string of HTML

B A real DOM element

C A virtual DOM node representing a div

D Nothing

💡 Hint

Check the Output column in row for step 1 in execution_table

At which step is the real DOM updated?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look at the Action and Notes columns in execution_table for step 3

If the render function returned a different VNode, what would change in the execution_table?

A Step 3 would not update the real DOM

B Step 1 output would show a different VNode

C Step 2 would be skipped

D User would not see any UI

💡 Hint

Focus on the Output column in step 1 of execution_table

Concept Snapshot

Vue templates compile into render functions.
Render functions return virtual DOM nodes.
Virtual DOM is a JS object representing UI.
Vue patches virtual DOM to real DOM.
Render functions allow flexible, efficient UI updates.

Full Transcript

Vue uses render functions to create virtual DOM nodes from templates or directly from code. These virtual DOM nodes are lightweight JavaScript objects that represent the UI structure. Vue then compares these virtual nodes with previous ones and updates the real DOM efficiently to reflect changes. This process allows Vue to optimize rendering and gives developers flexibility to control UI rendering beyond simple templates.

Practice

1. Why do Vue developers use render functions instead of templates?

easy

A. To avoid using JavaScript in components

B. Because templates are deprecated in Vue 3

C. To create dynamic or complex UI that templates can't easily express

D. Because render functions automatically improve performance

Solution

1. Step 1: Understand the purpose of render functions

   Render functions allow building UI with JavaScript, useful when templates are limited.

2. Step 2: Compare templates and render functions

   Templates are simpler but less flexible; render functions handle complex dynamic UI better.

3. Final Answer:

   To create dynamic or complex UI that templates can't easily express -> Option C

4. Quick Check:

   Render functions = dynamic UI [OK]

Hint: Render functions handle complex UI templates struggle with [OK]

Common Mistakes:

• Thinking templates are deprecated
• Believing render functions avoid JavaScript
• Assuming render functions always boost performance

2. Which of the following is the correct way to create an element inside a Vue render function?

easy

A. return h('div', 'Hello World')

B. return Hello World

C. return createElement('div', 'Hello World')

D. return render('div', 'Hello World')

Solution

1. Step 1: Recall Vue 3 render function syntax

   Vue 3 uses the h() function to create elements in render functions.

2. Step 2: Identify correct usage

   h('div', 'Hello World') correctly creates a div with text content.

3. Final Answer:

   return h('div', 'Hello World') -> Option A

4. Quick Check:

   Use h() to create elements [OK]

Hint: Use h() function inside render functions [OK]

Common Mistakes:

• Using JSX syntax without setup
• Using createElement which is Vue 2 style
• Using a non-existent render() function

3. What will this Vue render function output?

render() {
  return h('ul', [
    h('li', 'Apple'),
    h('li', 'Banana'),
    h('li', 'Cherry')
  ])
}

medium

A. AppleBananaCherry

B. AppleBananaCherry

C. Error: render function must return a single root element

D. AppleBananaCherry

Solution

1. Step 1: Analyze the render function structure

   The function returns a ul element with three li children created by h().

2. Step 2: Understand the output HTML

   The output is a ul containing three list items with text 'Apple', 'Banana', and 'Cherry'.

3. Final Answer:

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

4. Quick Check:

   h() creates nested elements correctly [OK]

Hint: h() nests elements as children arrays [OK]

Common Mistakes:

• Thinking children concatenate as text
• Expecting multiple root elements without wrapper
• Confusing output with error about root element

4. Identify the error in this Vue render function:

render() {
  return h('div', [
    h('p', 'Hello'),
    h('span', 'World')
  ])
}

medium

A. Missing a root element wrapper causes error

B. No error, this render function is correct

C. h() requires three arguments, missing one

D. Using an array as second argument to h() is invalid

Solution

1. Step 1: Check h() usage

   Passing an array of children as the second argument to h() is valid in Vue 3.

2. Step 2: Verify root element presence

   The root element is a div, which wraps the children correctly.

3. Final Answer:

   No error, this render function is correct -> Option B

4. Quick Check:

   Array children inside h() are valid [OK]

Hint: Array children inside h() are allowed [OK]

Common Mistakes:

• Thinking array children are invalid
• Expecting multiple root elements error here
• Assuming h() needs 3 arguments always

5. You want to create a Vue component that renders a list of items with a conditional class on each item using a render function. Which approach correctly applies a class only if the item is selected?

render() {
  return h('ul', this.items.map(item =>
    h('li', { class: item.selected ? 'active' : '' }, item.name)
  ))
}

hard

A. This code correctly applies 'active' class only to selected items

B. Class should be inside an array, not a string

C. The class property must be 'className' instead of 'class'

D. You cannot use conditional classes in render functions

Solution

1. Step 1: Understand class binding in render functions

   Passing an object with a 'class' property works to set classes conditionally.

2. Step 2: Analyze the conditional expression

   The ternary operator sets 'active' if item.selected is true, else empty string, which means no class.

3. Final Answer:

   This code correctly applies 'active' class only to selected items -> Option A

4. Quick Check:

   Conditional class with ternary in render function works [OK]

Hint: Use ternary inside class property for conditional classes [OK]

Common Mistakes:

• Using 'className' instead of 'class' in Vue
• Thinking class must be an array always
• Believing conditional classes are impossible in render functions