Vue Academy · درس

نمط المكوّنات عالية الترتيب (HOC)

تغليف المكوّنات باستخدام HOCs، وتمرير Props وSlots، ومتى يُستخدم HOC بدلًا من Composable

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

ما المكوّن عالي الرتبة

المكوّن عالي الرتبة (HOC) هو دالة تتلقى مكوّناً وتُرجع مكوّناً جديداً يغلّفه. ويضيف سلوكاً مشتركاً مثل التسجيل أو فحوصات المصادقة أو تحميل البيانات، من دون تعديل المكوّن الأصلي.

توقيع الدالة

يُسمّى HOC عادةً باستخدام السابقة with. فهو يتلقى المكوّن المغلّف ويُرجع مكوّناً محسّناً.

function withLogging(Wrapped) {
  // return a new component
}

إرجاع defineComponent

يُبنى المكوّن الجديد باستخدام defineComponent. وتصيّر دالة setup الخاصة به المكوّن المغلّف عبر h.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

تمرير السمات

لكي يكون الغلاف شفافاً، انشروا ctx.attrs على المكوّن المغلّف. وبهذا تمررون class وstyle وأي props غير معروفة.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

تمرير slots

مرروا كائن slots الخاص بالغلاف بوصفه وسيط المحتوى الفرعي، حتى يظل المكوّن المغلّف يتلقى كل محتوى slots من المستهلك.

return () => h(Wrapped, attrs, slots);

إضافة سلوك مشترك

الفكرة الأساسية هي حقن السلوك. في هذا المثال، نسجّل عملية التركيب وإلغاء التركيب حول المكوّن المغلّف.

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

استخدام HOC

غلّفوا أي مكوّن، ثم استخدموا الناتج مثل أي مكوّن عادي في القوالب أو دوال التصيير الأخرى.

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

تسمية الغلاف

عيّنوا قيمة لـ name حتى يمكن التعرف إلى الغلاف في Vue DevTools. ويساعد تركيب اسم المكوّن المغلّف في إبقاء الشجرة واضحة.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

حقن props إضافية

يمكن لـ HOC توفير props إضافية للمكوّن المغلّف، مثل مجموعة بيانات جرى جلبها أو علامة لميزة.

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC في مقابل Composables

تشارك Composables المنطق، وغالباً ما تكون الخيار المفضّل في Vue 3. وتكون HOCs أفضل عندما يتعين عليكم تغليف تصيير مكوّن موجود لا يمكنكم تعديله، أو لتوحيد حدّ فاصل مثل معالجة الأخطاء.

تركيب عدة HOCs

بما أن كل HOC يُرجع مكوّناً، فإنها تتركب عبر التعشيش. طبّقوها بحيث يكون الغلاف الخارجي هو الأخير.

const Enhanced = withLogging(withUser(BaseTable));

اختبار سريع

لكي يكون غلاف HOC شفافاً، ما الذي يجب أن يمرره إلى المكوّن المغلّف؟

خلاصة

يُرجع HOC مثل withLogging(Wrapped) مكوّناً جديداً من defineComponent، وتصيّر دالة setup فيه المكوّن المغلّف باستخدام h(Wrapped, attrs, slots)، مع إضافة سلوك مشترك مثل التسجيل أو props المحقونة. مرروا السمات وslots لتحقيق الشفافية، وفضّلوا Composables عندما تحتاجون فقط إلى مشاركة المنطق.

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

هل درس «نمط المكوّنات عالية الترتيب (HOC)» مجاني؟

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

ماذا ستتعلم في «نمط المكوّنات عالية الترتيب (HOC)»؟

تغليف المكوّنات باستخدام HOCs، وتمرير Props وSlots، ومتى يُستخدم HOC بدلًا من Composable تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «نمط المكوّنات عالية الترتيب (HOC)»؟

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

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

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

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

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

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