तपाई टेम्पलेटको सट्टा render functions वा JSX कहिले प्रयोग गर्नुहुन्छ?

Question

Accepted Answer

Vue टेम्पलेटहरू **render functions** मा compile हुन्छन् जो virtual DOM फर्काउँछन्। सामान्यतः तपाई टेम्पलेटहरू लेख्नुहुन्छ, तर तपाई render function (वा JSX) सीधै लेख्न सक्नुहुन्छ जब तपाईलाई **JavaScript को पूर्ण शक्ति** चाहिन्छ UI प्रोग्रामेटिकली उत्पन्न गर्न। ## एक 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 लाई imperatively बनाउँछ। यहाँ heading level लाई runtime मा compute गरिन्छ `h1`–`h6` छनोट गर्न — टेम्पलेट सिन्ट्याक्सको साथ अलग। ## JSX (Vue JSX plugin को साथ) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX ले तपाईलाई plain JS (`.map`, conditionals, variables) प्रयोग गरन tree बनाउन दिन्छ — React developers को लागि परिचित र अत्यधिक गतिशील संरचनाहरूको लागि अधिक लचकदार। ## जब 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 ``` ## जब टेम्पलेटको साथ रहन (डिफल्ट) ```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 ``` विशेष गरी, टेम्पलेट compiler ले performance optimizations थप्छ (यसले जान्दछ कि कस्तो static बनाम dynamic हुन्छ) जो हातले लेखिएका render functions ले स्वचालित रूपमा पाउँदैनन्। ## यो किन महत्त्वपूर्ण छ टेम्पलेटहरू सही डिफल्ट हुन् — पठनीय, tooling-friendly, र compiler-optimized। तर render functions/JSX भागको हिंसक पथ हुन् जब UI लाई programmatically उत्पन्न गर्नुपर्दछ (dynamic tags, recursive trees, library components) जहाँ टेम्पलेट सिन्ट्याक्स twisted हुन्छ। दुवै अवस्थित हुन् भन्ने जान्ने — र टेम्पलेटहरू typical app code को लागि पसन्द गरिन्छन् जबकि render functions dynamic/library scenarios को लागि उपयुक्त हुन् — तपाईलाई सही उपकरण छनोट गर्न दिन्छ एक दृष्टिकोण सर्वत्र बल दिन बिना।