Quando useresti render functions o JSX invece dei template?

Question

Accepted Answer

I template Vue vengono compilati a **render functions** che ritornano il virtual DOM. Solitamente scrivi template, ma puoi scrivere direttamente la render function (o JSX) quando hai bisogno della **piena potenza di JavaScript** per generare l'UI in modo programmatico. ## Una 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)` costruisce vnodes in modo imperativo. Qui il livello di heading viene calcolato a runtime per scegliere `h1`–`h6` — difficile con la sintassi dei template. ## JSX (con il plugin Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX ti permette di usare JS semplice (`.map`, condizionali, variabili) per costruire l'albero — familiare agli sviluppatori React e più flessibile per strutture altamente dinamiche. ## Quando render functions / JSX vale la pena ```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 ``` ## Quando restare con i template (il default) ```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 ``` Notabilmente, il template compiler aggiunge ottimizzazioni di performance (sa cosa è statico vs dinamico) che le render function scritte a mano non ottengono automaticamente. ## Perché è importante I template sono il default giusto — leggibili, tool-friendly, e ottimizzati dal compiler. Ma le render functions/JSX sono il salvavita quando l'UI deve essere generata programmaticamente (tag dinamici, alberi ricorsivi, componenti di librerie) dove la sintassi dei template diventa contorta. Sapere che entrambi esistono — e che i template sono preferiti per il codice tipico dell'app mentre le render function si adattano a scenari dinamici/di librerie — ti permette di scegliere lo strumento giusto senza forzare un approccio ovunque.