Когда бы вы использовали render functions или JSX вместо templates?

Question

Accepted Answer

Vue templates компилируются в **render functions**, которые возвращают virtual DOM. Обычно вы пишете templates, но вы можете писать render function (или JSX) напрямую, когда вам нужна **полная мощь JavaScript** для программного создания UI. ## Функция render ```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)` создает vnodes императивно. Здесь уровень заголовка вычисляется во время выполнения для выбора `h1`–`h6` — неудобно с синтаксисом template. ## JSX (с плагином Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX позволяет использовать обычный JS (`.map`, условия, переменные) для построения дерева — знаком разработчикам React и более гибок для высокодинамических структур. ## Когда render functions / JSX имеют смысл ```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 ``` ## Когда остаться с templates (по умолчанию) ```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 ``` Важно отметить, что компилятор template добавляет оптимизации производительности (он знает, что статично и что динамично), которые вручную написанные render functions не получают автоматически. ## Почему это важно Templates — правильный выбор по умолчанию — читаемые, удобные для инструментов и оптимизированные компилятором. Но render functions/JSX — это спасательный люк, когда UI должен быть создан программно (динамические теги, рекурсивные деревья, компоненты библиотеки), где синтаксис template становится сложным. Знание того, что оба существуют — и что templates предпочтительны для типичного кода приложения, а render functions подходят для динамических/библиотечных сценариев — позволяет выбрать правильный инструмент без навязывания одного подхода везде.