ਤੁਸੀਂ templates ਦੀ ਜਗ੍ਹਾ render functions ਜਾਂ JSX ਕਦੋਂ ਵਰਤੋਗੇ?

Question

Accepted Answer

Vue templates **render functions** ਵਿੱਚ compile ਹੁੰਦੇ ਹਨ ਜੋ virtual DOM ਵਾਪਸ ਕਰਦੇ ਹਨ। ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ templates ਲਿਖਦੇ ਹੋ, ਪਰ ਤੁਸੀਂ render function (ਜਾਂ JSX) ਸਿੱਧੇ ਲਿਖ ਸਕਦੇ ਹੋ ਜਦੋਂ ਤੁਹਾਨੂੰ **JavaScript ਦੀ ਪੂਰੀ ਸ਼ਕਤੀ** ਦੀ ਲੋੜ ਹੋਵੇ UI ਨੂੰ programmatically ਤਿਆਰ ਕਰਨ ਲਈ। ## ਇੱਕ 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 ਨੂੰ imperative ਤਰੀਕੇ ਨਾਲ ਬਣਾਉਂਦਾ ਹੈ। ਇੱਥੇ heading level ਨੂੰ runtime 'ਤੇ compute ਕੀਤਾ ਜਾਂਦਾ ਹੈ `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 ਨੂੰ automatically ਨਹੀਂ ਮਿਲਦੇ। ## ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ Templates ਸਹੀ ਡਿਫ਼ਾਲਟ ਹਨ — readable, tooling-friendly, ਅਤੇ compiler-optimized। ਪਰ render functions/JSX escape hatch ਹਨ ਜਦੋਂ UI ਨੂੰ programmatically ਤਿਆਰ ਕਰਨਾ ਲਾਜ਼ਮੀ ਹੋ (dynamic tags, recursive trees, library components) ਜਿੱਥੇ template syntax twisted ਹੋ ਜਾਂਦਾ ਹੈ। ਜਾਣਨਾ ਕਿ ਦੋਵੇਂ ਮੌਜੂਦ ਹਨ — ਅਤੇ ਕਿ templates ਨੂੰ typical app code ਲਈ ਪ੍ਰਾਇਰਿਟੀ ਦਿੱਤੀ ਜਾਂਦੀ ਹੈ ਜਦੋਂ ਕਿ render functions dynamic/library scenarios ਲਈ suit ਕਰਦੇ ਹਨ — ਤੁਹਾਨੂੰ ਸਹੀ ਟੂਲ ਚੁਣਨ ਦਿੰਦਾ ਹੈ ਹਰ ਜਗ੍ਹਾ ਇੱਕ approach ਮਜ਼ਬੂਰ ਕੀਤੇ ਬਿਨਾਂ।