متى تستخدم دوال render أو JSX بدلاً من templates؟

Question

Accepted Answer

يتم تجميع Vue templates إلى **دوال render** التي ترجع virtual DOM. عادةً تكتب templates، لكن يمكنك كتابة دالة render (أو JSX) مباشرة عندما تحتاج إلى **القوة الكاملة لـ JavaScript** لإنشاء واجهة المستخدم برمجياً. ## دالة 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)` تبني vnodes بشكل إلزامي. هنا يتم حساب مستوى العنوان في وقت التشغيل لاختيار `h1`–`h6` — أمر محرج مع بناء template. ## JSX (مع Vue JSX plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX يتيح لك استخدام JavaScript عادي (`.map`, الشروط، المتغيرات) لبناء الشجرة — مألوف لمطوري React وأكثر مرونة للهياكل الديناميكية للغاية. ## عندما تكون دوال render / 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 يضيف تحسينات الأداء (يعرف ما هو ثابت مقابل ديناميكي) التي دوال render المكتوبة يدويًا لا تحصل عليها تلقائيًا. ## لماذا هذا مهم Templates هي الخيار الافتراضي الصحيح — قابلة للقراءة وودية لأدوات التطوير ومُحسَّنة من قبل المجمع. لكن دوال render/JSX هي بوابة الهروب عندما يجب إنشاء واجهة المستخدم برمجياً (وسوم ديناميكية، أشجار عودية، مكونات المكتبة) حيث يصبح بناء template معقداً. معرفة أن كليهما موجود — وأن templates مفضلة لكود تطبيق نموذجي بينما دوال render تناسب السيناريوهات الديناميكية/المكتبة — يتيح لك اختيار الأداة المناسبة دون فرض منهج واحد في كل مكان.