Yaushe za a yi amfani da render functions ko JSX maimakon templates?

Question

Accepted Answer

Vue templates an jera zuwa **render functions** da suke mayar da virtual DOM. Yawamcin lokaci kuna rubuta templates, amma kuna iya rubuta aiki na render (ko JSX) kai tsaye lokacin da kuke bukacin **karfi gaba ɗaya na JavaScript** don samar da UI ta hanyar jadawali. ## Aiki na render ```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)` yana gina vnodes ta hanyar jagora. A nan, mataki na saje ana lissafin a lokacin gudummawa don zaɓar `h1`–`h6` — sauƙi tare da syntax na template. ## JSX (tare da plugin na Vue JSX) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX yana ba ka damar amfani da JS na duwali (`.map`, shari'a, masu canjin) don gina bishiya — sananne wa ƴan bada sabis na React kuma mafi laici ga tsarin da ke shafar gwaji. ## Lokacin da ayyuka na render / JSX ba su da mahimmanci ```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 ``` ## Lokacin da za a ci gaba da templates (abin barazana) ```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 ``` Mu zahiri, mai walewa na template yana ƙara ingantattun karfi na aiki (ya sani abin da ya zama tsaye takeda na gudummawa) da ayyuka na render da aka rubuta da hannu ba sa samun kai tsaye. ## Me ya sa haka makari Templates shine daidaitaccen barazana — karanta, saman na garashi, da ingantattun na mai walewa. Ammå ayyuka na render/JSX shine hanya ta tserewa lokacin da dole a samar da UI ta hanyar jadawali (tagin gudummawa, bishiyar maimaita, sassa na gida) inda syntax na template ya zama maƙarƙashi. Sanin cewa dukarsu akwai — da templates suke fi dacewa ga lambar gadewa ta app yayin da ayyuka na render suke dace da yanayin gudummawa/gida — yana ba ka damar zaɓar kayan aiki daidai ba tare da jajagga hanya daya a ko'ina.