render دالة التصيير
آخر تحديث: 2026-10-22
render دالة التصيير
يُعيد خيار render العقد الافتراضية من دالة بدلاً من القالب: يُستخدم عند الحاجة للتعبير عن الهيكل بالكامل بـ JS (أو عندما تكون المستويات الديناميكية عميقة).
| المجموعة | الخيارات: العرض ودورة الحياة |
|---|---|
| النوع | خيار |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
import { h } from "vue"
export default {
render() { return h("p", this.msg) }
}⚙️ الوسائط
| value | دالة: تُعيد عقداً افتراضية منشأة بـ h() (أو مصفوفة) |
|---|
القيمة المُرجعة：عقدة DOM افتراضية (VNode)
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Renders three list items: Item 1, Item 2, Item 3.💡 نقاط مهمة
ℹ️ ملاحظة القالب بعد الترجمة ليس سوى دالة render: الاثنان متكافئان، القالب أسهل قراءة و render أكثر مرونة.
💡 نصيحة أكثر طبيعية للوسوم الديناميكية والتداخل الشرطي المعقد والهياكل المولدة بحلقات JS.
⚠️ تحذير لا توجد توجيهات قوالب داخل دالة render: استبدل v-if/v-for بتعبيرات JS.
🏷️ العرض ودورة الحياة ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س متى يجب استخدام render؟
ج عندما يلزم تحديد أسماء الوسوم ديناميكياً حسب البيانات، أو كانت مستويات الهيكل غير ثابتة، فيصبح القالب ثقيلاً.
س ما علاقتها بـ JSX؟
ج تُترجم JSX إلى استدعاءات h()، فجوهرهما واحد، والفرق أن كتابتها أقرب إلى HTML.
س هل يمكن استخدام البيانات التفاعلية؟
ج نعم: عند وصول render إلى this.xxx تُجمع التبعيات تلقائياً، وأي تغيير يعيد التصيير.
