Quand utiliser des render functions ou JSX à la place des templates ?

Question

Accepted Answer

Les templates Vue sont compilés en **render functions** qui retournent un virtual DOM. Normalement, vous écrivez des templates, mais vous pouvez écrire directement la render function (ou JSX) quand vous avez besoin de la **puissance complète de JavaScript** pour générer l'UI de manière programmatique. ## Une 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)` construit les vnodes de façon impérative. Ici, le niveau de heading est calculé à l'exécution pour choisir `h1`–`h6` — maladroit avec la syntaxe des templates. ## JSX (avec le plugin Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX vous permet d'utiliser du JavaScript pur (`.map`, des conditions, des variables) pour construire l'arborescence — familier pour les développeurs React et plus flexible pour les structures hautement dynamiques. ## Quand les render functions / JSX en valent la peine ```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 ``` ## Quand s'en tenir aux templates (l'approche par défaut) ```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 ``` Notamment, le compilateur de templates ajoute des optimisations de performance (il sait ce qui est statique vs dynamique) que les render functions écrites à la main n'obtiennent pas automatiquement. ## Pourquoi c'est important Les templates sont la bonne approche par défaut — lisibles, compatibles avec les outils, et optimisés par le compilateur. Mais les render functions/JSX sont l'échappatoire quand l'UI doit être générée de manière programmatique (tags dynamiques, arbres récursifs, composants de bibliothèque) où la syntaxe des templates devient contournée. Savoir que les deux existent — et que les templates sont préférés pour le code typique des applications tandis que les render functions conviennent aux scénarios dynamiques/de bibliothèque — vous permet de choisir le bon outil sans forcer une approche partout.