Vue templates render functions मध्ये compile होतात जे virtual DOM परत करतात. सामान्यतः तुम्ही templates लिहिता, परंतु तुम्ही render function (किंवा JSX) थेट लिहू शकता जेव्हा तुम्हाला UI programmatically generate करण्यासाठी JavaScript ची पूर्ण शक्ती आवश्यक असते.
{ h } ;
{
: [],
() {
(, slots.());
},
};
h(tag, props, children) vnodes imperative पद्धतीने बनवते. येथे heading level runtime वर compute केला जातो h1–h6 निवडण्यासाठी — template syntax सह विचित्र.
export default {
props: ["items"],
setup(props) {
return () => (
<ul>
{props.items.map((item) =>
item.visible ? <li key={item.id}>{item.name}</li> : null
)}
</ul>
);
},
};
JSX तुम्हाला plain JS (.map, conditionals, variables) वापरून tree बनवू देते — React developers साठी परिचित आणि उच्च dynamic structures साठी अधिक लचकदार.
✓ 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
✓ 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 compiler performance optimizations जोडतो (हे जाणते की काय static vs dynamic आहे) जे hand-written render functions स्वयंचलितपणे मिळत नाहीत.
Templates योग्य डिफॉल्ट आहेत — readable, tooling-friendly, आणि compiler-optimized.
परंतु render functions/JSX escape hatch आहेत जेव्हा UI programmatically generate केले पाहिजे (dynamic tags, recursive trees, library components) जेथे template syntax contorted होते.
दोन्ही अस्तित्वात आहेत हे जाणून — आणि templates typical app code साठी preferred असल्याने जेव्हा render functions dynamic/library scenarios साठी योग्य असतात — तुम्हाला एका दृष्टिकोन सर्वत्र लागू न करता सही tool निवडू देते.