Mikor használnál render funkciókat vagy JSX-et a sablonok helyett?

Question

Accepted Answer

A Vue sablonok **render függvényekre** fordulnak le, amelyek virtuális DOM-ot adnak vissza. Általában sablonokat írsz, de közvetlenül írhatod a render függvényt (vagy JSX-et), amikor a **JavaScript teljes erejére** van szükséged az UI programozottan történő generálásához. ## Egy render függvény ```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

}, }; ``` A `h(tag, props, children)` imperatív módon építi fel a vnodokat. Itt a címsor szintjét futásidőben számítjuk ki az `h1`–`h6` kiválasztásához — kellemetlen a sablon szintaxissal. ## JSX (a Vue JSX plugin-nel) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` A JSX lehetővé teszi, hogy sima JS-t (`.map`, feltételeket, változókat) használj a fa felépítéséhez — ismerős a React fejlesztőknek és rugalmasabb a nagyon dinamikus szerkezetekhez. ## Amikor render függvények / JSX megérnek ```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 ``` ## Amikor maradjunk a sablonoknál (alapértelmezés) ```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 ``` Jellegzetesen a sablon fordító teljesítmény optimalizációkat ad (tudja, mi statikus vs dinamikus), amelyeket a kézzel írt render függvények nem kapnak meg automatikusan. ## Miért fontos A sablonok a helyes alapértelmezés — olvashatók, eszköz-barátok és fordító-optimalizáltak. De a render függvények/JSX a kiugrás, amikor az UI-t programozottan kell generálni (dinamikus címkék, rekurzív fák, könyvtári komponensek), ahol a sablon szintaxisa nyűgössé válik. Annak tudatában, hogy mindkettő létezik — és hogy a sablonok előnyben részesülnek a tipikus alkalmazáskód számára, míg a render függvények dinamikus/könyvtár forgatókönyvekhez illeszkednek — lehetővé teszi a megfelelő eszköz kiválasztását anélkül, hogy minden helyen egy megközelítést kényszerítene.