आप render functions या JSX का उपयोग templates के बजाय कब करेंगे?

Question

Accepted Answer

Vue templates को **render functions** में संकलित किया जाता है जो virtual DOM लौटाते हैं। आमतौर पर आप templates लिखते हैं, लेकिन जब आपको UI को प्रोग्रामेटिक रूप से उत्पन्न करने के लिए **JavaScript की पूरी शक्ति** की आवश्यकता हो तो आप render function (या JSX) सीधे लिख सकते हैं। ## एक 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)` vnodes को अनिवार्य रूप से बनाता है। यहां heading स्तर को `h1`–`h6` चुनने के लिए runtime पर गणना की जाती है — template syntax के साथ अजीब। ## JSX (Vue JSX plugin के साथ) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX आपको सादे JS (`.map`, conditionals, variables) का उपयोग करके tree बनाने देता है — 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 compiler performance optimizations जोड़ता है (यह जानता है कि क्या static बनाम dynamic है) जो hand-written render functions को स्वचालित रूप से नहीं मिलते। ## यह क्यों मायने रखता है Templates सही डिफ़ॉल्ट हैं — पठनीय, tooling-friendly, और compiler-optimized। लेकिन render functions/JSX escape hatch हैं जब UI को प्रोग्रामेटिक रूप से उत्पन्न किया जाना चाहिए (dynamic tags, recursive trees, library components) जहां template syntax जटिल हो जाता है। यह जानना कि दोनों मौजूद हैं — और templates सामान्य app code के लिए पसंदीदा हैं जबकि render functions गतिशील/library scenarios के लिए उपयुक्त हैं — आपको हर जगह एक दृष्टिकोण पर जोर दिए बिना सही tool चुनने देता है।