Kdaj bi uporabil/a render funkcije ali JSX namesto predlog?

Question

Accepted Answer

Vue predloge se prevajajo v **render funkcije**, ki vrnejo virtualni DOM. Navadno napišeš predlogo, toda render funkcijo (ali JSX) lahko napišeš direktno, ko potrebuješ **polno moč JavaScripta** za programsko generiranje vmesnika. ## Render funkcija ```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)` imperatívno gradi vnodes. Tu se raven naslova izračuna ob izvajanju, da izbere `h1`–`h6` — z sintakso predlog je to neprijetno. ## JSX (s Vue JSX vtičnikom) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX te pusti, da uporabiš navaden JS (`.map`, pogojne stavke, spremenljivke) za gradnjo drevesa — poznano razvijalcem React-a in bolj fleksibilno za visoko dinamične strukture. ## Kdaj so render funkcije / JSX vredne ```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 ``` ## Kdaj se držati predlog (privzeto) ```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 ``` Zaznamovalnih je, da prevajalnik predlog doda optimizacije zmogljivosti (ve, kaj je statično in kaj dinamično), ki jih ročno napisane render funkcije ne dobijo samodejno. ## Zakaj je to pomembno Predloge so pravi privzetek — berljive, prijazne za orodja in optimizirane s prevajalnikam. Ampak render funkcije/JSX so izhod iz slabe situacije, kadar mora biti vmesnik generiран programsko (dinamične oznake, rekurzívna drevesa, komponente knjižnjice), kjer sintaksa predlog postane zapletena. Znanje, da oba obstajata — in da so predloge prednostne za tipično kodo aplikacije, medtem ko so render funkcije primerne za dinamične/knjižnične scenarije — ti omogoči, da izbereš pravo orodje brez vsiljevanja enega pristopa povsod.