Funcția h() (Hyperscript) în Vue 3 în Vue.js & Nuxt

Ce este funcția h() în Vue 3

Funcția h() (prescurtare de la hyperscript) generează noduri Virtual DOM direct din JavaScript pur. Deși marea majoritate a componentelor folosesc sintaxa <template>, funcția de randare h() este indispensabilă când construiți componente de nivel foarte scăzut, biblioteci de UI flexibile sau generatoare dinamice de tag-uri HTML bazate pe proprietăți.

import { h } from 'vue';

// Randează dinamic un tag <h1>, <h2> etc. în funcție de prop-ul 'nivel'
export default {
    props: ['nivel'],
    setup(props, { slots }) {
        return () => h(`h${props.nivel}`, { class: 'titlu-dinamic' }, slots.default());
    }
};