আপনি কখন templates এর পরিবর্তে render functions বা JSX ব্যবহার করবেন?

Question

Accepted Answer

Vue templates **render functions** এ সংকলিত হয় যা virtual DOM ফেরত দেয়। সাধারণত আপনি templates লিখেন, কিন্তু আপনি 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)` imperatively vnodes তৈরি করে। এখানে heading level runtime এ গণনা করা হয় `h1`–`h6` বাছাই করতে — template syntax এর সাথে অসুবিধাজনক। ## 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 এর কাছে পরিচিত এবং অত্যন্ত dynamic structures এর জন্য আরও নমনীয়। ## যখন 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 dynamic/library scenarios এর জন্য উপযুক্ত — আপনাকে একটি পদ্ধতি সর্বত্র জোর না করে সঠিক tool বেছে নিতে দেয়।