Kada biste koristili render funkcije ili JSX umjesto predložaka?

Question

Accepted Answer

Vue predlošci se kompajliraju u **render funkcije** koje vraćaju virtualni DOM. Obično pišete predloške, ali možete napisati render funkciju (ili JSX) direktno kada trebate **punu moć JavaScripta** za programsku generiranja sučelja. ## 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)` gradi vnodes imperativno. Ovdje se razina naslova izračunava tijekom izvođenja kako bi se odabrala `h1`–`h6` — neprikladno sa sintaksom predloška. ## JSX (s Vue JSX dodatkom) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX vam omogućava korištenje običnog JS-a (`.map`, uvjetne naredbe, varijable) za izgradnju stabla — poznato React razvojnjacima i fleksibilnije za vrlo dinamičke strukture. ## Kada su render funkcije / JSX vrijedne ```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 ``` ## Kada se vratiti predlošcima (zadanu vrijednost) ```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 ``` Znatno, kompajler predloška dodaje optimizacije performansi (zna što je statično naspram dinamičkog) koje ručno napisane render funkcije automatski ne dobivaju. ## Zašto je to važno Predlošci su ispravan zadanu vrijednost — čitljivi, alati-prijateljski i kompajler-optimizirani. Ali render funkcije/JSX su bijeg kada sučelje mora biti generirano programski (dinamičke oznake, rekurzivna stabla, komponente biblioteke) gdje sintaksa predloška postaje komplicirana. Znajući da su oba dostupna — i da su predlošci preferirani za tipičan kod aplikacije dok render funkcije odgovaraju dinamičkim/scenariji biblioteke — omogućuje vam odabir pra alata bez forsiranja jednog pristupa svugdje.