Vue Academy · درس

الخلطات والتوجيهات المخصصة

أعد استخدام المنطق باستخدام الخلطات وأنشئ توجيهات مخصصة.

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

إعادة استخدام المنطق

مع نمو التطبيقات، ستجد المنطق نفسه في العديد من المكوّنات. يوفر Vue عدة طرق لمشاركته. يغطي هذا الدرس طريقتين: أسلوب mixins الأقدم والتوجيهات المخصصة القوية.

ما هو Mixin؟

يُعد mixin كائنًا يحتوي على خيارات المكوّن، مثل البيانات والأساليب والخطافات، وتُدمج هذه الخيارات في أي مكوّن يستخدمه. كان هذا هو الأسلوب التقليدي لإعادة استخدام المنطق في Vue 2.

export const loggerMixin = {
  created() {
    console.log("Component created")
  },
  methods: {
    log(msg) { console.log(msg) }
  }
}

استخدام Mixin

أضف mixin إلى مكوّن من خلال مصفوفة mixins. تُدمج خياراته مع خيارات المكوّن الخاصة به.

import { loggerMixin } from "./loggerMixin"

export default {
  mixins: [loggerMixin],
  created() {
    this.log("Ready")
  }
}

سلبيات Mixins

تتضمن Mixins مشكلات فعلية: إذ لا يكون واضحًا مصدر الخاصية، وقد تتعارض الأسماء بين Mixins، كما تصبح قواعد الدمج مربكة. أدت هذه المشكلات إلى ظهور أسلوب أفضل.

Composables: الأسلوب الأفضل

في Vue 3، تحل composables، وهي دوال تستخدم Composition API، محل Mixins. فهي تجعل المصادر واضحة، وتتجنب تعارض الأسماء، وتتيح تركيب المنطق بطريقة منظمة. لذلك يُفضّل استخدامها في الشيفرة الجديدة.

import { ref } from "vue"

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

استخدام Composable

استدعِ composable داخل setup وفكّك بالضبط ما تحتاج إليه؛ فمصدر كل جزء سيكون واضحًا وصريحًا.

import { useCounter } from "./useCounter"

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

ما هو التوجيه المخصص؟

يُغلّف التوجيه المخصص سلوكًا منخفض المستوى في DOM، ويمكن إرفاقه بالعناصر باستخدام v-name. وهو مناسب لمعالجة DOM مباشرة، مثل التركيز والتمرير أو التلميحات.

تسجيل توجيه عام

سجّل توجيهًا في التطبيق باستخدام app.directive. ويُستخدم اسمه في القوالب مع البادئة v-.

app.directive("focus", {
  mounted(el) {
    el.focus()
  }
})

// usage: <input v-focus />

خطافات التوجيه

تحتوي التوجيهات على خطافات لدورة الحياة: mounted، أي بعد إدراج العنصر، وupdated، أي بعد تحديث المكوّن، وbeforeUnmount، أي قبل التنظيف، إضافةً إلى خطافات أخرى تحاكي دورة حياة المكوّن.

app.directive("color", {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value
  }
})

كائن binding

الوسيط الثاني للخطاف هو binding. ويحمل value، أي القيمة المُمرّرة، وarg، أي القيمة التي تأتي بعد النقطتين، وmodifiers، أي القيم التي تأتي بعد النقاط.

// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }

التوجيهات المحلية

بالنسبة إلى التوجيهات المستخدمة في مكوّن واحد فقط، سجّلها محليًا باستخدام الخيار directives بدلًا من تسجيلها بشكل عام.

export default {
  directives: {
    focus: {
      mounted(el) { el.focus() }
    }
  }
}

اختبار سريع

اختبر معرفتك بـ Mixins والتوجيهات.

مراجعة

تدمج Mixins الخيارات في المكوّنات، لكنها تعاني من المصادر غير الواضحة وتعارض الأسماء؛ لذلك يُفضّل استخدام composables في Vue 3. وتغلّف التوجيهات المخصصة، التي تُسجّل باستخدام app.directive أو محليًا، سلوك DOM باستخدام خطافات مثل mounted وكائن binding. ستغلف بعد ذلك الوظائف في إضافة قابلة لإعادة الاستخدام.

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

هل درس «الخلطات والتوجيهات المخصصة» مجاني؟

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

ماذا ستتعلم في «الخلطات والتوجيهات المخصصة»؟

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

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

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

كم من الوقت يستغرق درس «الخلطات والتوجيهات المخصصة»؟

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

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

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

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

الخلطات والتوجيهات المخصصة
تطوير الإضافات
هيكل مجلدات قابل للتوسع

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