Hvornår ville du bruge render functions eller JSX i stedet for templates?

Question

Accepted Answer

Vue templates bliver kompileret til **render functions**, der returnerer virtual DOM. Normalt skriver du templates, men du kan skrive render function (eller JSX) direkte, når du har brug for **fuld kraft af JavaScript** til at generere brugerfladen programmatisk. ## En 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)` bygger vnodes imperativt. Her beregnes overskriftsniveauet ved kørselstid for at vælge `h1`–`h6` — ubelejligt med template-syntaks. ## JSX (med Vue JSX plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX lader dig bruge almindelig JS (`.map`, betingelser, variabler) til at opbygge træet — kendt for React-udviklere og mere fleksibelt for højdynamiske strukturer. ## Når render functions / JSX er værd det ```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 ``` ## Når man skal holde sig til templates (standard) ```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 ``` Bemærk især, at template-kompileren tilføjer performanceoptimeringer (den ved hvad der er statisk vs dynamisk), som handskrevne render functions ikke får automatisk. ## Hvorfor det betyder noget Templates er det rigtige standard valg — læseligt, værktøjsvenligt og kompiler-optimeret. Men render functions/JSX er udvejen, når brugerfladen skal genereres programmatisk (dynamiske tags, rekursive træer, bibliotekskomponenter), hvor template-syntaks bliver kompliceret. At vide, at begge dele eksisterer — og at templates foretrækkes til typisk app-kode, mens render functions passer til dynamiske/biblioteks-scenarier — lader dig vælge det rigtige værktøj uden at tvinge ét tilgang alle steder.