Vue Academy · درس

لماذا Composition API؟

قيود Options API، ومشكلة إعادة استخدام المنطق، ومزايا Composition API

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

الطريقتان لكتابة Vue

توفّر Vue 3 أسلوبين لكتابة منطق المكوّنات: Options API وComposition API. ينتج كلاهما النتيجة نفسها، لكنهما ينظّمان الشيفرة بطرق مختلفة جدًا.

يساعدك فهم المفاضلات بينهما على اختيار الأداة المناسبة وقراءة قواعد الشيفرة الحالية بثقة.

كيفية تنظيم Options API للشيفرة

تقسّم Options API المكوّن إلى أقسام ثابتة: data وcomputed وmethods وwatch وخطافات دورة الحياة. ويكون كل جزء من الميزة في قسم مختلف.

قد تضطر إلى تعديل أربع كتل منفصلة في الملف لتنفيذ ميزة صغيرة واحدة.

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

المشكلة: تشتّت المسؤوليات

عندما يكبر المكوّن، يتوزّع منطق مسؤولية واحدة (مثل مربع بحث) بين data وmethods وcomputed وwatch. وستضطر باستمرار إلى التمرير إلى أعلى الملف وأسفله لتتبّع ميزة واحدة.

تُسمّى هذه مشكلة التشتّت.

Composition API: تجميع الشيفرة حسب الميزة

تتيح لك Composition API وضع كل الشيفرة الخاصة بمسؤولية منطقية واحدة معًا. فتكون الحالة التفاعلية والقيم المشتقة والدوال التي تغيّرها متجاورة.

يمكنك القراءة من أعلى إلى أسفل ورؤية ميزة كاملة في مكان واحد.

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

مقارنة جنبًا إلى جنب

لاحظ كيف يحافظ المثال الثاني على تجميع count وقيمته المشتقة doubled والدالة increment معًا. أما في Options API، فكانت هذه الأجزاء الثلاثة نفسها موزّعة على ثلاثة أقسام منفصلة.

Options API: منظّمة حسب نوع الخيار
Composition API: منظّمة حسب المسؤولية المنطقية

إعادة استخدام المنطق: mixins (الطريقة القديمة)

قبل ظهور Composition API، كانت أداة إعادة الاستخدام الأساسية هي mixins. إذ يدمج mixin خياراته في أحد المكوّنات.

لكن mixins تسبّب مشكلات حقيقية، منها تعارضات الأسماء، وعدم وضوح مصادر الخصائص، ووجود تبعيات ضمنية بين mixins.

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

إعادة استخدام المنطق: composables (الطريقة الحديثة)

إن composable مجرد دالة تستخدم واجهات التفاعل وتُرجع حالة تفاعلية. ويمكنك استدعاؤها مثل أي دالة، لذلك يكون مصدر كل قيمة واضحًا وصريحًا.

لا يوجد دمج سحري ولا تعارضات أسماء مخفية.

import { ref } from 'vue'

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

استخدام composable

يجعل استيراد composable واستدعاؤه واضحًا أن count وincrement يأتيان من useCounter. ويمكنك حتى إعادة تسميتهما عند تفكيك البنية لتجنّب التعارضات.

import { useCounter } from './useCounter'

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

لماذا تتفوّق composables على mixins

مصادر صريحة — تأتي كل قيمة من استدعاء دالة ظاهر.
لا تعارضات أسماء — يمكنك تفكيك البنية وإعادة التسمية بحرية.
قابلة للتركيب — يمكن لـ composable استدعاء composable آخر.
ملائمة للأنواع — يستنتج TypeScript الأنواع المُرجعة تلقائيًا.

TypeScript وأدوات تطوير أفضل

لأن Composition API مبنية من دوال ومتغيرات عادية، يستطيع TypeScript استنتاج الأنواع من دون أدوات خاصة. ولا يوجد this يحتاج إلى الحفاظ على نوع مكتوب يدويًا، كما توفّر المحرّرات إكمالًا تلقائيًا دقيقًا.

متى تستخدم كل واحدة

تتألّق Composition API في المكوّنات المتوسطة والكبيرة، وفي أي منطق تريد إعادة استخدامه. ولا تزال Options API صالحة تمامًا، وقد تكون سهلة القراءة في المكوّنات الصغيرة جدًا.

تميل الشيفرة الجديدة في Vue 3 عمومًا إلى استخدام Composition API، ولا سيما مع <script setup> الذي ستتعرّف إليه قريبًا.

اختبار سريع

اختبر ما تعلّمته عن سبب وجود Composition API.

مراجعة

تعلّمت في هذا الدرس ما يلي:

تنظّم Options API الشيفرة حسب نوع الخيار، مما يشتّت الميزة بين الأقسام.
تجمع Composition API الشيفرة حسب المسؤولية المنطقية.
تعيد Mixins استخدام المنطق، لكنها تسبّب تعارضات الأسماء وتخفي مصادر القيم.
إن Composables دوال عادية تُرجع حالة تفاعلية — واضحة المصادر، وخالية من التعارضات، وقابلة للتركيب.

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

هل درس «لماذا Composition API؟» مجاني؟

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

ماذا ستتعلم في «لماذا Composition API؟»؟

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

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

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

كم من الوقت يستغرق درس «لماذا Composition API؟»؟

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

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

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

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

لماذا Composition API؟
دالة setup() والمتغيرات التفاعلية
‏ref مقابل reactive: متى تستخدم كلًّا منهما
‏Computed وWatch في Composition API

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