Kiedy używałbyś render functions lub JSX zamiast templates?

Question

Accepted Answer

Vue templates są kompilowane na **render functions**, które zwracają wirtualny DOM. Zwykle piszesz templates, ale możesz pisać render function (lub JSX) bezpośrednio, gdy potrzebujesz **pełnej mocy JavaScript** do programmatycznego generowania interfejsu użytkownika. ## 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)` imperatywnie buduje vnodes. Tutaj poziom nagłówka jest obliczany w runtime, aby wybrać `h1`–`h6` — niezgrabnie z składnią template. ## JSX (z Vue JSX plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX pozwala na używanie zwykłego JS (`.map`, warunkowe, zmienne) do budowania drzewa — znane programistom React i bardziej elastyczne dla wysoce dynamicznych struktur. ## Kiedy render functions / JSX się opłacają ```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 ``` ## Kiedy trzymać się templates (domyślnie) ```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 ``` Warto zauważyć, że kompilator template dodaje optymalizacje wydajności (wie, co jest statyczne a co dynamiczne), które ręcznie napisane render functions nie uzyskują automatycznie. ## Dlaczego to ważne Templates są słusznym ustawieniem domyślnym — czytelne, przyjazne narzędziom i optymalizowane przez kompilator. Ale render functions/JSX są wyjściem awaryjnym, gdy interfejs użytkownika musi być generowany programmatycznie (znaczniki dynamiczne, drzewa rekurencyjne, komponenty biblioteczne), gdzie składnia template staje się skomplikowana. Wiedzenie, że oba istnieją — i że templates są preferowane dla typowego kodu aplikacji, podczas gdy render functions nadają się dla scenariuszy dynamicznych/bibliotecznych — pozwala wybrać odpowiednie narzędzie bez narzucania jednego podejścia wszędzie.