h function for creating vnodes in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Vue component using h?

Consider this Vue 3 component using the h function to create virtual nodes:

import { h } from 'vue';

export default {
  setup() {
    return () => h('div', { class: 'container' }, [
      h('h1', 'Hello World'),
      h('p', 'This is a paragraph.')
    ]);
  }
};

What will this component render in the browser?

Vue

import { h } from 'vue';

export default {
  setup() {
    return () => h('div', { class: 'container' }, [
      h('h1', 'Hello World'),
      h('p', 'This is a paragraph.')
    ]);
  }
};

A <div class="container">Hello World<p>This is a paragraph.</p></div>

B <div><h1>Hello World</h1><p>This is a paragraph.</p></div>

C <div class="container"><h1>Hello World</h1><p>This is a paragraph.</p></div>

D <div class="container"><h1></h1><p></p></div>

💡 Hint

Remember that the second argument to h can be an object for attributes, and the third argument is children.

The h function creates virtual nodes. Here, the outer div has a class container. Inside it, there is an h1 with text 'Hello World' and a p with text 'This is a paragraph.'

📝 Syntax

intermediate

Which h function call correctly creates a button with a click event listener?

In Vue 3, you want to create a button element with the text 'Click me' and a click event that calls handleClick. Which h call is correct?

A h('button', { onClick: handleClick }, 'Click me')

B h('button', { onclick: handleClick }, 'Click me')

C h('button', { onClick: handleClick() }, 'Click me')

D h('button', { onClick: () => handleClick() }, 'Click me')

💡 Hint

Vue event listeners use on prefix with camelCase and expect a function reference, not a call.

Option D correctly passes an arrow function that calls handleClick on click. Option D uses onClick which is case-sensitive and should be onClick but Vue expects onClick (case sensitive) but the function reference is missing the arrow function wrapper. Option D calls handleClick immediately, which is wrong. Option D uses lowercase onclick which Vue does not recognize.

🔧 Debug

advanced

Why does this h function call cause a runtime error?

Examine this code snippet:

h('ul', null, [
  h('li', 'Item 1'),
  h('li', 'Item 2'),
  h('li')
])

Why does this cause a runtime error in Vue?

Vue

h('ul', null, [
  h('li', 'Item 1'),
  h('li', 'Item 2'),
  h('li')
])

A The second argument <code>null</code> is invalid and should be an object.

B The last <code>h('li')</code> call is missing children, causing undefined rendering error.

C The array of children must be a flat array, nested arrays cause errors.

D The <code>h</code> function requires at least two arguments; three is invalid.

💡 Hint

Check what happens if you call h with only one argument for an element that expects children.

The last h('li') call has no children or props. Vue expects children or null/undefined explicitly. Omitting children can cause runtime errors because Vue tries to render undefined content.

🧠 Conceptual

advanced

What is the main purpose of Vue's h function?

Choose the best description of what the h function does in Vue 3.

A It creates virtual DOM nodes (vnodes) that represent elements before rendering.

B It directly manipulates the real DOM elements for faster updates.

C It compiles Vue templates into JavaScript render functions.

D It manages component lifecycle hooks automatically.

💡 Hint

Think about what virtual DOM means and how Vue renders components.

The h function creates virtual DOM nodes, which are lightweight JavaScript objects representing DOM elements. Vue uses these to efficiently update the real DOM.

❓ state_output

expert

What is the output after clicking the button in this Vue component using h?

Consider this Vue 3 component:

import { h, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return () => h('div', [
      h('button', { onClick: increment }, `Count: ${count.value}`)
    ]);
  }
};

What happens when you click the button?

Vue

import { h, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return () => h('div', [
      h('button', { onClick: increment }, `Count: ${count.value}`)
    ]);
  }
};

A The button label never updates; it stays at 'Count: 0' despite clicks.

B The button label updates to show the incremented count each click.

C Clicking the button causes a runtime error due to missing reactivity.

D The count increments but the button label shows the previous count value.

💡 Hint

Consider how Vue tracks reactive changes and when the render function runs.

The button label uses count.value at render time. The increment function updates count.value, but the render function does not re-run because the component does not track the reactive dependency properly in this setup. So the label stays at 'Count: 0'.