Render function syntax in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a render function in Vue?

A render function is a JavaScript function that returns Virtual DOM nodes instead of using template syntax. It tells Vue how to build the UI programmatically.

beginner

How do you create a simple render function in Vue 3?

You define a function that returns <code>h()</code> calls, where <code>h</code> is the createElement helper imported from Vue. For example: <pre>import { h } from 'vue';
export default { render() { return h('div', 'Hello!'); } }</pre>

beginner

What does the h function do in Vue render functions?

The h function creates Virtual DOM nodes. It takes the tag name, props, and children as arguments to build the UI structure.

intermediate

Why might you use a render function instead of a template in Vue?

Render functions give you more control and flexibility, especially for dynamic or complex UI logic that is hard to express in templates.

intermediate

How do you pass props and children in a Vue render function?

You pass props as the second argument to h as an object, and children as the third argument as a string, array, or another h call. Example:

h('button', { disabled: true }, 'Click me')

What does the h function in Vue render functions stand for?

A Hook function for lifecycle

B HTML string generator

C Hyperscript helper to create Virtual DOM nodes

D Helper for CSS styling

The h function is short for 'hyperscript' and creates Virtual DOM nodes in Vue render functions.

Which of these is a correct minimal render function in Vue 3?

A render() { return h('div', 'Hello'); }

B render() { return '<div>Hello</div>'; }

C render() { return template: '<div>Hello</div>'; }

D render() { return createElement('div', 'Hello'); }

In Vue 3, the render function uses the h function to create Virtual DOM nodes.

How do you pass attributes like 'id' or 'class' in a Vue render function?

A You cannot pass attributes in render functions

B Inside the children array

C As a string in the first argument

D As the second argument object to <code>h</code>, e.g., { id: 'main' }

Attributes and props are passed as an object in the second argument to the h function.

Why might a developer choose a render function over a template?

A Because templates are deprecated

B To write UI logic programmatically with more control

C To avoid using JavaScript

D Because render functions are easier for beginners

Render functions allow more control and flexibility for complex UI logic that templates can't easily express.

In Vue 3, where do you import the h function from?

A From 'vue'

B From 'vue-router'

C From 'vuex'

D From 'vue-loader'

The h function is imported directly from the 'vue' package.

Explain how to write a basic render function in Vue 3 and what the h function does.

Think about how you build UI elements with JavaScript instead of templates.

Describe when and why you might prefer using a render function instead of a template in Vue.

Consider situations where templates might not be enough.

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