När skulle du använda render-funktioner eller JSX istället för templates?

Question

Accepted Answer

Vue-templates kompileras till **render-funktioner** som returnerar virtuell DOM. Vanligtvis skriver du templates, men du kan skriva render-funktionen (eller JSX) direkt när du behöver **full kraft från JavaScript** för att programmatiskt generera gränssnittet. ## En render-funktion ```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. Här beräknas rubriknivån vid körning för att välja `h1`–`h6` — besvärligt med template-syntax. ## JSX (med Vue JSX-pluginen) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX låter dig använda vanlig JS (`.map`, villkor, variabler) för att bygga trädet — bekant för React-utvecklare och mer flexibelt för högdynamiska strukturer. ## När render-funktioner / JSX är värda 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 ska hålla sig till 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 ``` Värt att notera är att template-kompilatorn lägger till prestandaoptimieringar (den vet vad som är statiskt kontra dynamiskt) som handskrivna render-funktioner inte får automatiskt. ## Varför det spelar roll Templates är rätt standardval — läsbara, verktygsvänliga och kompilatoroptimerade. Men render-funktioner/JSX är utvägen när gränssnittet måste genereras programmatiskt (dynamiska taggar, rekursiva träd, bibliotekskomponenter) där template-syntax blir krånglig. Att veta att båda finns — och att templates är att föredra för typisk appkod medan render-funktioner passar dynamiska/bibliotekscenarier — låter dig välja rätt verktyg utan att tvinga en metod överallt.