Render functions vs templates decision in Vue - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to prefer render functions over templates in Vue?

Which scenario best justifies using render functions instead of templates in Vue?

A When you need to dynamically create complex nested elements based on runtime data

B When you want to write simple static HTML markup without any logic

C When you want to separate styles from markup using CSS files

D When you want to use Vue's built-in directives like v-if and v-for

💡 Hint

Think about flexibility and dynamic structure creation.

Render functions allow you to write JavaScript code that creates elements dynamically, which is useful for complex or highly dynamic UI structures. Templates are simpler and better for static or declarative markup.

❓ component_behavior

intermediate

Output difference between template and render function

Given the Vue component below, what will be the rendered output in the browser?

Vue

const MyComponent = {
  template: `<div><p>Hello from template</p></div>`
}

const MyRenderComponent = {
  render() {
    return Vue.h('div', [Vue.h('p', 'Hello from render function')])
  }
}

A Syntax error in render function component

B <div>Hello from template</div> and <div>Hello from render function</div>

C <p>Hello from template</p> and <p>Hello from render function</p>

D <div><p>Hello from template</p></div> and <div><p>Hello from render function</p></div>

💡 Hint

Check the HTML tags created by each method.

The template creates a div containing a paragraph with text. The render function uses Vue's h() helper to create the same structure programmatically. Both render a div with a paragraph inside.

📝 Syntax

advanced

Identify the syntax error in this render function

What is wrong with the following Vue render function code?

Vue

render() {
  return Vue.h('div', [
    Vue.h('p', 'Line 1'),
    Vue.h('p', 'Line 2')
  ])
}

A Missing closing bracket for the array argument

B Vue.h should be called with three arguments

C The render function must return a string, not a vnode

D The 'p' tag is not allowed inside a div in Vue render functions

💡 Hint

Check the brackets carefully.

The array passed as the second argument to Vue.h is not properly closed. The closing square bracket is missing before the closing parenthesis.

🔧 Debug

advanced

Why does clicking the button not trigger handleClick?

Consider this Vue render function: render() { return Vue.h('button', { onclick: this.handleClick }, 'Click me') } Why does clicking the button not trigger handleClick?

A The event listener key should be 'onclick' all lowercase

B The event listener key should be 'onClick' with uppercase C

C The event listener key should be 'onClick' but Vue expects 'onClick' as a camelCase prop

D The event listener key should be 'onClick' but Vue expects 'onClick' as 'onClick' (correct) so the error is elsewhere

💡 Hint

Vue event listeners in render functions use a specific naming convention.

In Vue render functions, event listeners use camelCase keys: 'onClick' (uppercase 'C') for the 'click' event. The code uses 'onclick' (lowercase), which Vue does not recognize as an event listener, so the handler is not bound.

❓ state_output

expert

State update behavior in render function vs template

Given this Vue component using a render function, what will be the displayed count after clicking the button twice? const Counter = { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, render() { return Vue.h('div', [ Vue.h('p', `Count: ${this.count}`), Vue.h('button', { onClick: this.increment }, 'Increment') ]) } }

A Count: 1

B Count: 0

C Count: 2

D Runtime error due to incorrect event binding

💡 Hint

Consider how Vue tracks reactive data and updates the DOM.

Vue tracks reactive data like count. When increment updates count, Vue re-renders the component, updating the displayed count. After two clicks, count becomes 2 and the UI shows 'Count: 2'.