Quando você usaria render functions ou JSX em vez de templates?

Question

Accepted Answer

Os templates Vue são compilados em **render functions** que retornam DOM virtual. Normalmente você escreve templates, mas pode escrever a render function (ou JSX) diretamente quando precisa da **potência total do JavaScript** para gerar a interface do usuário programaticamente. ## Uma 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)` constrói vnodes imperativamente. Aqui o nível do título é calculado em tempo de execução para escolher `h1`–`h6` — desconfortável com a sintaxe de template. ## JSX (com o plugin Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX permite usar JS simples (`.map`, condicionais, variáveis) para construir a árvore — familiar para desenvolvedores React e mais flexível para estruturas altamente dinâmicas. ## Quando render functions / JSX valem a 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 manter os templates (o padrão) ```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 ``` Notavelmente, o compilador de templates adiciona otimizações de desempenho (sabe o que é estático versus dinâmico) que render functions escritas manualmente não obtêm automaticamente. ## Por que isso importa Os templates são o padrão certo — legíveis, amigáveis com ferramentas e otimizados pelo compilador. Mas render functions/JSX são a saída de escape quando a interface do usuário deve ser gerada programaticamente (tags dinâmicas, árvores recursivas, componentes de biblioteca) onde a sintaxe de template fica contorcida. Saber que ambos existem — e que templates são preferidos para código típico de aplicativo enquanto render functions são adequadas para cenários dinâmicos/de biblioteca — permite escolher a ferramenta correta sem forçar uma abordagem em qualquer lugar.