آپ render functions یا JSX کو templates کی بجائے کب استعمال کریں گے؟

Question

Accepted Answer

Vue templates **render functions** میں compile ہوتے ہیں جو virtual DOM واپس کرتے ہیں۔ عام طور پر آپ templates لکھتے ہیں، لیکن آپ render function (یا JSX) براہ راست لکھ سکتے ہیں جب آپ کو UI کو programmatically generate کرنے کے لیے **JavaScript کی مکمل طاقت** کی ضرورت ہو۔ ## ایک 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)` imperatively vnodes بناتا ہے۔ یہاں heading level runtime پر computed ہے تاکہ `h1`–`h6` میں سے منتخب کریں — template syntax کے ساتھ awkward۔ ## 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 کے لیے familiar اور بہت زیادہ dynamic structures کے لیے زیادہ flexible۔ ## جب 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 کے ساتھ رہیں (default) ```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 صحیح default ہیں — 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 کے لیے موزوں ہیں — آپ کو بغیر کسی approach کو ہر جگہ لازم کیے صحیح tool منتخب کرنے دیتا ہے۔