h() إنشاء العقد الافتراضية
آخر تحديث: 2026-10-22
h() إنشاء العقد الافتراضية
تنشئ h() عقداً افتراضية (VNode): إنها الواجهة الأساسية تحت دوال التصيير و JSX، وتُستخدم أيضاً لتوليد الهياكل ديناميكياً.
| المجموعة | دوال العرض و SSR |
|---|---|
| النوع | API |
| النطاق | داخل المكوّن |
| إصدار Vue | 3.0+ |
| دعم SSR | مدعوم |
📝 الصيغة
h("div", { class: "box" }, "المحتوى")
h(MyComp, { msg: "hi" }, { default: () => "محتوى الـ slot" })⚙️ الوسائط
| type, props?, children? | النوع (اسم وسم أو مكوّن) + كائن props اختياري + الأبناء (سلسلة/مصفوفة/كائن slots) |
|---|
القيمة المُرجعة：عقدة افتراضية VNode
▶ مثال
عدّل الشيفرة أدناه وشاهد النتيجة مباشرة:
المخرجات：
Renders a three-item list.💡 نقاط مهمة
ℹ️ ملاحظة القالب بعد الترجمة ليس سوى استدعاءات h(): فهمها يساعد على قراءة ناتج الترجمة و JSX.
💡 نصيحة اكتب h() يدوياً فقط عند الحاجة لهيكل برمجي كامل؛ الصفحات الاعتيادية أسهل صيانةً بالقوالب.
⚠️ تحذير الوسيط الأول حساس لحالة الأحرف: h('div') وسم أصلي، بينما h('Div') يُفسَّر كمكوّن.
🏷️ دوال العرض و SSR ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س أيهما أفضل، h أم JSX؟
ج JSX أقرب إلى HTML وأسهل قراءة لكنه يحتاج دعم بناء؛ و h لا يحتاج بناء ويناسب القليل من الهياكل الديناميكية.
س كيف تُمرَّر الـ slots؟
ج الوسيط الثالث يكون كائناً: { default: () => [...], header: () => [...] }.
س هل يجب استيرادها؟
ج في مشاريع البناء استوردها من vue؛ وفي بيئات CDN استخدم Vue.h.
