Wanneer zou je render functions of JSX gebruiken in plaats van templates?

Question

Accepted Answer

Vue templates worden gecompileerd naar **render functions** die de virtual DOM retourneren. Normaal schrijf je templates, maar je kunt de render function (of JSX) direct schrijven wanneer je de **volledige kracht van JavaScript** nodig hebt om de UI programmatisch te genereren. ## Een render function ```js import { h } from "vue"; // h = hyperscript: creates a virtual DOM node export default { props: ["level"], setup(props, { slots }) { // dynamically choose the tag — hard to express in a template return () => h(`h${props.level}`, slots.default()); // → renders an

}, }; ``` `h(tag, props, children)` bouwt vnodes imperatief. Hier wordt het heading level op runtime berekend om `h1`–`h6` te kiezen — onhandig met template syntax. ## JSX (met de Vue JSX plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX laat je plain JS (`.map`, conditionals, variabelen) gebruiken om de tree te bouwen — vertrouwd voor React-ontwikkelaars en flexibeler voor zeer dynamische structuren. ## Wanneer render functions / JSX het waard zijn ```text ✓ Programmatic structure: a tag/component decided at runtime (dynamic headings, schema-driven UI) ✓ Highly conditional or recursive rendering hard to express with v-if/v-for ✓ Building reusable component libraries / higher-order components ✓ Rendering based on complex JS logic where template directives feel clumsy ``` ## Wanneer je bij templates moet blijven (de standaard) ```text ✓ Almost all app UI — templates are more readable, optimized by the compiler, and benefit from compile-time hints (static hoisting, patch flags) for performance ✓ Better tooling: IDE highlighting, type-checking, easier for the whole team ``` Opmerkelijk is dat de template compiler performance optimizations toevoegt (het weet wat statisch vs dynamisch is) die handgeschreven render functions niet automatisch krijgen. ## Waarom het belangrijk is Templates zijn de juiste standaard — leesbaar, tooling-vriendelijk en compiler-geoptimaliseerd. Maar render functions/JSX zijn de ontsnappingsluik wanneer UI programmatisch moet worden gegenereerd (dynamische tags, recursieve bomen, library-componenten) waarbij template syntax ingewikkeld wordt. Weten dat beide bestaan — en dat templates de voorkeur hebben voor typische app-code terwijl render functions geschikt zijn voor dynamische/library-scenario's — laat je het juiste gereedschap kiezen zonder één benadering overal af te dwingen.