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?
import { h } from 'vue'; export default { setup() { return () => h('div', { class: 'container' }, [ h('h1', 'Hello World'), h('p', 'This is a paragraph.') ]); } };
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.'
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?
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.
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?
h('ul', null, [ h('li', 'Item 1'), h('li', 'Item 2'), h('li') ])
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.
h function?Choose the best description of what the h function does in Vue 3.
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.
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?
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}`) ]); } };
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'.