¿Cuándo usarías render functions o JSX en lugar de templates?

Question

Accepted Answer

Los templates de Vue se compilan en **render functions** que devuelven virtual DOM. Normalmente escribes templates, pero puedes escribir la render function (o JSX) directamente cuando necesitas la **potencia completa de JavaScript** para generar la UI de forma programática. ## 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)` construye vnodes de forma imperativa. Aquí el nivel del encabezado se calcula en tiempo de ejecución para elegir `h1`–`h6` — incómodo con la sintaxis de templates. ## JSX (con el plugin Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX te permite usar JS puro (`.map`, condicionales, variables) para construir el árbol — familiar para desarrolladores de React y más flexible para estructuras altamente dinámicas. ## Cuándo render functions / JSX valen 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 ``` ## Cuándo usar templates (lo predeterminado) ```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 ``` Observa que el compilador de templates añade optimizaciones de rendimiento (sabe qué es estático vs dinámico) que las render functions escritas manualmente no obtienen automáticamente. ## Por qué es importante Los templates son la opción predeterminada correcta — legibles, amigables con herramientas y optimizados por el compilador. Pero render functions/JSX son la vía de escape cuando la UI debe generarse de forma programática (etiquetas dinámicas, árboles recursivos, componentes de biblioteca) donde la sintaxis de templates se vuelve engorrosa. Saber que ambas existen — y que los templates son preferidos para código de aplicación típico mientras que render functions se ajustan a escenarios dinámicos/de biblioteca — te permite elegir la herramienta correcta sin forzar un único enfoque en todas partes.