Kdy byste místo templates používali render functions nebo JSX?

Question

Accepted Answer

Vue templates jsou zkompilovány do **render functions**, které vrací virtual DOM. Obvykle píšete templates, ale render function (nebo JSX) můžete psát přímo, když potřebujete **plnou sílu JavaScriptu** pro programové generování uživatelského rozhraní. ## 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)` imperativně vytváří vnodes. Zde se úroveň nadpisu počítá za běhu pro výběr `h1`–`h6` — s template syntaxí nepohodlné. ## JSX (s Vue JSX plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX vám umožní používat prostý JS (`.map`, podmínky, proměnné) pro stavbu stromu — známé vývojářům React a flexibilnější pro vysoce dynamické struktury. ## Kdy jsou render functions / JSX cenné ```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 ``` ## Kdy se držet templates (výchozí) ```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 ``` Zvlášť si všimněte, že kompilátor template přidává optimalizace výkonu (ví, co je statické vs dynamické), které ručně psané render functions automaticky nedostávají. ## Proč na tom záleží Templates jsou správná výchozí volba — čitelné, vhodné pro nástroje a optimalizované kompilátorem. Ale render functions/JSX jsou únik, když se uživatelské rozhraní musí generovat programově (dynamické tagy, rekurzivní stromy, komponenty knihoven), kde se template syntaxe stává složitou. Znalost, že obojí existuje — a že templates jsou preferovány pro typický kód aplikací, zatímco render functions vyhovují dynamickým/knihovnám — vám umožní vybrat si správný nástroj bez vynucení jednoho přístupu všude.