Intermediate LevelVue JS
How do you write programmatic render functions using h() or JSX in Vue 3?
❓ Interview Prompt: Explain Vue 3 render functions, h() hyperscript function arguments (type, props, children), and dynamic tag rendering.
While templates are recommended for 99% of UI components, programmatic Render Functions using 'h()' (hyperscript) or JSX are useful when rendering highly dynamic UI elements (like dynamic heading tags '<h1>' through '<h6>' or table column generators).
The 'h(type, props, children)' Function:
1
type: HTML tag string ('"div"'), component, or async component.
2
props: Object of attributes, event listeners ('onClick'), and props.
3
children: Array of child VNodes, text string, or slots object.
Code Implementation Example
javascript
import { h } from 'vue';
// Programmatic Dynamic Heading Component using h()
const DynamicHeading = (props, { slots }) => {
return h(
`h${props.level}`, // Dynamic tag name: 'h1', 'h2', etc.
{ class: 'dynamic-title', onClick: () => console.log('Clicked') },
slots.default ? slots.default() : []
);
};
DynamicHeading.props = ['level'];
export default DynamicHeading;💡Building a dynamic heading component using Vue 3 h() render function.
🎯 Interview Key Takeaway
Use h(type, props, children) render functions for programmatic UI components where template syntax is insufficiently dynamic.
#render functions#h()#JSX#Intermediate
Back to all Vue JS Questions→