Når ville du brukt render functions eller JSX i stedet for templates?

Question

Accepted Answer

Vue templates blir kompilert til **render functions** som returnerer virtual DOM. Vanligvis skriver du templates, men du kan skrive render function (eller JSX) direkte når du trenger **full kraft fra JavaScript** for å generere brukergrensesnittet 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 imperatívt. Her blir heading-nivået beregnet ved kjøretid for å velge `h1`–`h6` — vanskelig 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 lar deg bruke vanlig JS (`.map`, betingelser, variabler) for å bygge treet — kjent for React-utviklere og mer fleksibelt for svært dynamiske strukturer. ## Når render functions / JSX er verdt 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 du bør holde deg til templates (standarden) ```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 ``` Merkelig nok legger template compileren til ytelsesoptimeringer (den vet hva som er statisk vs dynamisk) som håndskrevne render functions ikke får automatisk. ## Hvorfor dette er viktig Templates er riktig standard — lesbar, verktøyvenlig og compiler-optimalisert. Men render functions/JSX er fluktveien når brukergrensesnittet må genereres programmatisk (dynamiske tagger, rekursive trær, bibliotekkomponenter) hvor template-syntaks blir knøttet. Å vite at begge finnes — og at templates er foretrukket for typisk app-kode mens render functions passer for dynamiske/biblioteksscenarioer — lar deg velge riktig verktøy uten å tvinge en tilnærming overalt.