Vue Academy · درس

شرح متعمق للدالة h()

توقيع ‎h(type, props, children)‎، وبنية VNode، وعرض أنواع المكوّنات الديناميكية

شرح متعمق للدالة h() درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما هي دالة h؟

تنشئ دالة h (اختصارًا لـ hyperscript) عقد DOM افتراضية (VNodes) مباشرةً في JavaScript. وهي الأساس الذي تُحوّل القوالب إليه أثناء الترجمة. وتعِيد دالة التصيير نتيجة استدعاء h.

التوقيع

تستقبل h ثلاث وسائط: h(type, props, children). ويمكن أن يكون type سلسلة تمثل اسم وسم، أو كائن مكوّن، أو مكوّنًا وظيفيًا. أما props فهو كائن للسمات والخصائص والأحداث. وchildren هو نص أو مصفوفة من VNodes أو كائن slots.

import { h } from "vue";

h(type, props, children);

عنصر بسيط

يؤدي تمرير اسم وسم وكائن props يحتوي على class إلى إنشاء عنصر منسّق. أما الوسيط الثالث هنا فهو محتوى نصي عادي.

import { h } from "vue";

h("div", { class: "foo" }, "text");
// renders: <div class="foo">text</div>

الخصائص مقابل السمات

يوضع كل شيء في كائن props نفسه: سمات HTML، وخصائص DOM، وclass، وstyle، ومستمعو الأحداث. ويحدد Vue موضع كل منها عند تنفيذ التصحيح.

h("input", {
  type: "text",
  value: "hello",
  class: "field",
  placeholder: "Type here"
});

مصفوفات العناصر الفرعية

عندما يحتوي العنصر على عدة عناصر فرعية، مرّروا مصفوفة من VNodes بوصفها الوسيط الثالث. وكل عنصر فرعي هو بدوره استدعاء لـ h.

h("ul", null, [
  h("li", null, "item")
]);
// renders: <ul><li>item</li></ul>

تمرير null عند عدم وجود props

إذا لم يكن للعنصر أي props، فيمكنكم تمرير null (أو كائن فارغ) بوصفه الوسيط الثاني، بحيث يبقى المحتوى الفرعي في الموضع الثالث.

h("ul", null, [
  h("li", null, "first"),
  h("li", null, "second")
]);

تصيير مكوّن

يمكن أن يكون وسيط النوع مكوّناً مستورداً. وتصبح props التي تمررونها هي props الخاصة بذلك المكوّن.

import { h } from "vue";
import MyComponent from "./MyComponent.vue";

h(MyComponent, { title: "Hello" });

تمرير slots ككائن

لتمرير محتوى slots إلى مكوّن، يتحول وسيط المحتوى الفرعي إلى كائن من الدوال. كل مفتاح هو اسم slot، وكل قيمة هي دالة تُرجع VNodes أو نصاً.

h(MyComponent, { title: "Hello" }, {
  default: () => "slot content"
});

الـ slots المسمّاة والمحددة النطاق

الـ slots المتعددة ليست سوى مفاتيح متعددة. وتتلقى slots المحددة النطاق props الخاصة بها بوصفها وسيطاً للدالة.

h(MyComponent, null, {
  header: () => h("h1", null, "Title"),
  default: (props) => h("p", null, props.text)
});

مستمعات الأحداث

الأحداث هي props تسبقها on متبوعة باسم الحدث بصيغة PascalCase. ومستمع النقر هو prop باسم onClick.

h("button", {
  onClick: () => console.log("clicked")
}, "Press me");

إرجاع h من دالة تصيير

داخل setup يمكنكم إرجاع دالة تصيير بدلاً من قالب. وتُستدعى هذه الدالة عند كل إعادة تصيير لإنتاج شجرة VNode.

import { h, ref } from "vue";

export default {
  setup() {
    const count = ref(0);
    return () => h("button", {
      onClick: () => count.value++
    }, "Count: " + count.value);
  }
};

اختبار سريع

كيف تمررون محتوى slot الافتراضي إلى مكوّن باستخدام h؟

خلاصة

تبني الدالة h عناصر VNode باستخدام h(type, props, children). يكون type وسمًا أو مكوّناً، وتحتوي props على السمات ومستمعات onEvent، بينما يكون children نصاً أو مصفوفة من VNodes أو كائن slots من الدوال. تُرجع دوال التصيير استدعاءات h وتعمل عند كل إعادة تصيير.

الأسئلة الشائعة

هل درس «شرح متعمق للدالة h()» مجاني؟

نعم — نص درس «شرح متعمق للدالة h()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «شرح متعمق للدالة h()»؟

توقيع ‎h(type, props, children)‎، وبنية VNode، وعرض أنواع المكوّنات الديناميكية تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «شرح متعمق للدالة h()»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

شرح متعمق للدالة h()
‏JSX في Vue 3 باستخدام Vite
المكوّنات الديناميكية باستخدام دوال render
نمط المكوّنات عالية الترتيب (HOC)

← العودة إلى Vue Academy