Wann würden Sie render functions oder JSX statt templates verwenden?

Question

Accepted Answer

Vue templates werden zu **render functions** kompiliert, die Virtual DOM zurückgeben. Normalerweise schreiben Sie templates, aber Sie können die render function (oder JSX) direkt schreiben, wenn Sie die **volle Kraft von JavaScript** benötigen, um die Benutzeroberfläche programmgesteuert zu generieren. ## Eine 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)` erstellt imperativ vnodes. Hier wird die Überschriftsebene zur Laufzeit berechnet, um `h1`–`h6` auszuwählen — umständlich mit Template-Syntax. ## JSX (mit dem Vue JSX Plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX lässt Sie einfaches JS (`.map`, Bedingungen, Variablen) verwenden, um den Baum zu erstellen — vertraut für React-Entwickler und flexibler für hochdynamische Strukturen. ## Wenn render functions / JSX lohnend sind ```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 ``` ## Wann bei templates bleiben (Standard) ```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 ``` Beachten Sie, dass der Template-Compiler Performance-Optimierungen hinzufügt (er weiß, was statisch vs. dynamisch ist), die handgeschriebene render functions nicht automatisch erhalten. ## Warum es wichtig ist Templates sind die richtige Standard-Wahl — lesbar, tooling-freundlich und vom Compiler optimiert. Aber render functions/JSX sind das Fluchtloch, wenn die Benutzeroberfläche programmgesteuert generiert werden muss (dynamische Tags, rekursive Bäume, Bibliothekskomponenten), wo die Template-Syntax schwerfällig wird. Zu wissen, dass beide existieren — und dass templates für typischen App-Code bevorzugt werden, während render functions für dynamische/Bibliotheks-Szenarien geeignet sind — ermöglicht es Ihnen, das richtige Werkzeug auszuwählen, ohne überall einen Ansatz zu erzwingen.