واجهة برمجة تطبيقات التركيب (Composition API) في Vue.js 3: دليل متعمق للمطورين العالميين

أصبح Vue.js سريعًا خيارًا شائعًا لبناء تطبيقات الويب الحديثة، بفضل منحنى التعلم السهل وميزاته القوية. يأخذ Vue.js 3 هذا الأمر إلى مستوى أبعد مع تقديم واجهة برمجة تطبيقات التركيب (Composition API)، وهي طريقة جديدة لتنظيم منطق مكوناتك. يقدم هذا الدليل المتعمق شرحًا شاملًا لفهم واستخدام واجهة برمجة تطبيقات التركيب بفعالية، مما يزودك بالمهارات اللازمة لبناء تطبيقات Vue أكثر قابلية للصيانة وإعادة الاستخدام والاختبار.

ما هي واجهة برمجة تطبيقات التركيب (Composition API)؟

واجهة برمجة تطبيقات التركيب هي مجموعة من واجهات برمجة التطبيقات التي تسمح لنا بإنشاء مكونات Vue باستخدام دوال مستوردة بدلاً من الإعلان عن الخيارات. بشكل أساسي، تسمح لك بتجميع المنطق المترابط معًا، بغض النظر عن مكان ظهوره في القالب. يتناقض هذا مع واجهة برمجة تطبيقات الخيارات (Options API) (data، methods، computed، watch)، التي تجبرك على تنظيم الكود بناءً على هذه الفئات المحددة مسبقًا. فكر في واجهة برمجة تطبيقات الخيارات على أنها تنظم الكود الخاص بك حسب ماهيته (بيانات، دالة، إلخ)، بينما تتيح لك واجهة برمجة تطبيقات التركيب تنظيم الكود حسب ما يفعله.

يدور جوهر واجهة برمجة تطبيقات التركيب حول دالة setup(). هذه الدالة هي نقطة الدخول لاستخدام واجهة برمجة تطبيقات التركيب داخل المكون. داخل دالة setup()، يمكنك تعريف الحالة التفاعلية، والخصائص المحسوبة، والدوال، وخطاطيف دورة الحياة باستخدام دوال قابلة للتركيب.

لماذا نستخدم واجهة برمجة تطبيقات التركيب؟

تقدم واجهة برمجة تطبيقات التركيب العديد من المزايا مقارنة بواجهة برمجة تطبيقات الخيارات التقليدية، خاصة للتطبيقات الأكبر والأكثر تعقيدًا:

• تنظيم أفضل للكود: تسمح لك واجهة برمجة تطبيقات التركيب بتجميع المنطق المترابط في دوال قابلة للتركيب، مما يجعل الكود الخاص بك أكثر تنظيمًا وسهولة في الفهم. بدلاً من تفريق الكود المترابط عبر خصائص واجهة برمجة تطبيقات الخيارات المختلفة، يمكنك الاحتفاظ به كله معًا في مكان واحد. وهذا مفيد بشكل خاص عند التعامل مع المكونات المعقدة التي تتضمن ميزات متعددة.
• قابلية محسنة لإعادة الاستخدام: يمكن استخراج الدوال القابلة للتركيب وإعادة استخدامها بسهولة عبر مكونات متعددة. وهذا يعزز إعادة استخدام الكود ويقلل من التكرار، مما يؤدي إلى تطوير أكثر كفاءة. هذا يغير قواعد اللعبة للحفاظ على تجربة مستخدم متسقة عبر تطبيقك.
• قابلية أفضل للاختبار: تسهل واجهة برمجة تطبيقات التركيب اختبار الوحدات من خلال السماح لك باختبار الدوال القابلة للتركيب الفردية بشكل منفصل. هذا يجعل من السهل تحديد وإصلاح الأخطاء، مما ينتج عنه تطبيقات أكثر قوة وموثوقية.
• أمان الأنواع (Type Safety): عند استخدامها مع TypeScript، توفر واجهة برمجة تطبيقات التركيب أمانًا ممتازًا للأنواع، حيث تكتشف الأخطاء المحتملة أثناء التطوير. يمكن أن يؤدي ذلك إلى تحسين جودة الكود وقابليته للصيانة بشكل كبير.
• استخراج المنطق وإعادة استخدامه: تجعل واجهة برمجة تطبيقات التركيب من السهل استخراج وإعادة استخدام الأجزاء المنطقية من مكونك. وهذا مفيد بشكل خاص عند التعامل مع ميزات مثل جلب البيانات، أو التحقق من صحة النماذج، أو إدارة مصادقة المستخدم، والتي غالبًا ما تحتاج إلى مشاركتها عبر مكونات متعددة.

فهم المفاهيم الأساسية

دعنا نتعمق في المفاهيم الأساسية التي تقوم عليها واجهة برمجة تطبيقات التركيب:

1. setup()

كما ذكرنا سابقًا، دالة setup() هي نقطة الدخول لاستخدام واجهة برمجة تطبيقات التركيب. وهي خيار مكون يتم تنفيذه قبل إنشاء المكون. داخل دالة setup()، تقوم بتعريف الحالة التفاعلية، والخصائص المحسوبة، والدوال، وخطاطيف دورة الحياة، ثم تعيد كائنًا يحتوي على القيم التي تريد عرضها للقالب.

مثال:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

في هذا المثال، نستخدم ref لإنشاء متغير تفاعلي يسمى count. نحدد أيضًا دالة تسمى increment تزيد من قيمة count. أخيرًا، نعيد كائنًا يحتوي على count و increment، مما يجعلهما متاحين في قالب المكون.

2. الحالة التفاعلية مع ref و reactive

توفر واجهة برمجة تطبيقات التركيب دالتين أساسيتين لإنشاء حالة تفاعلية: ref و reactive.

• ref: تأخذ دالة ref قيمة أولية (رقم، سلسلة نصية، قيمة منطقية، إلخ) وتعيد كائن ref تفاعلي وقابل للتغيير. يتم الوصول إلى القيمة وتعديلها من خلال خاصية .value لكائن ref. استخدم ref عندما تريد تتبع التغييرات في قيمة واحدة.
• reactive: تأخذ دالة reactive كائنًا وتعيد وكيلًا تفاعليًا لذلك الكائن. ستؤدي التغييرات التي تطرأ على خصائص الكائن التفاعلي إلى تحديثات في المكون. استخدم reactive عندما تريد تتبع التغييرات في خصائص متعددة داخل كائن.

مثال باستخدام ref:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

مثال باستخدام reactive:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

3. الخصائص المحسوبة مع computed

الخصائص المحسوبة هي قيم مشتقة من حالة تفاعلية أخرى. يتم تحديثها تلقائيًا كلما تغيرت تبعياتها. تأخذ دالة computed دالة getter كوسيط وتعيد كائن ref تفاعلي للقراءة فقط.

مثال:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

في هذا المثال، fullName هي خاصية محسوبة تعتمد على firstName و lastName. كلما تغير أي من firstName أو lastName، سيتم تحديث fullName تلقائيًا.

4. المراقبون (Watchers) مع watch و watchEffect

تسمح لك المراقبون بالاستجابة للتغييرات في الحالة التفاعلية. توفر واجهة برمجة تطبيقات التركيب طريقتين رئيسيتين لإنشاء المراقبين: watch و watchEffect.

• watch: تسمح لك دالة watch بتحديد التبعيات التفاعلية التي يجب مراقبتها بشكل صريح. تأخذ مرجعًا تفاعليًا واحدًا أو أكثر (refs، خصائص محسوبة، أو كائنات تفاعلية) كوسيط أول ودالة رد اتصال (callback) كوسيط ثانٍ. يتم تنفيذ دالة رد الاتصال كلما تغيرت أي من التبعيات المحددة.
• watchEffect: تقوم دالة watchEffect تلقائيًا بتتبع جميع التبعيات التفاعلية المستخدمة داخل دالة رد الاتصال الخاصة بها. يتم تنفيذ دالة رد الاتصال في البداية ثم يعاد تنفيذها كلما تغيرت أي من التبعيات المتعقبة. هذا مفيد عندما تريد تنفيذ تأثيرات جانبية بناءً على تغييرات الحالة التفاعلية دون تحديد التبعيات بشكل صريح. ومع ذلك، كن حذرًا مع watchEffect حيث يمكن أن يؤدي أحيانًا إلى مشاكل في الأداء إذا تتبع عددًا كبيرًا جدًا من التبعيات.

مثال باستخدام watch:

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

مثال باستخدام watchEffect:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Hello')

    watchEffect(() => {
      console.log(`Message is: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

5. خطاطيف دورة الحياة (Lifecycle Hooks)

توفر واجهة برمجة تطبيقات التركيب إمكانية الوصول إلى خطاطيف دورة حياة المكون من خلال دوال تبدأ بـ on، مثل onMounted، و onUpdated، و onUnmounted. تأخذ هذه الدوال دالة رد اتصال كوسيط، والتي سيتم تنفيذها عند تشغيل خطاف دورة الحياة المقابل.

مثال:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted')
    })

    onUnmounted(() => {
      console.log('Component is unmounted')
    })

    return {}
  }
}

إنشاء دوال قابلة للتركيب (Composable Functions)

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

مثال: لنقم بإنشاء دالة قابلة للتركيب تتعقب موضع الفأرة:

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

الآن، يمكنك استخدام هذه الدالة القابلة للتركيب في أي مكون:

import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

أمثلة عملية وحالات استخدام

دعنا نستكشف بعض الأمثلة العملية لكيفية استخدام واجهة برمجة تطبيقات التركيب في سيناريوهات العالم الحقيقي:

1. جلب البيانات

يعد إنشاء دالة قابلة للتركيب لجلب البيانات من واجهة برمجة التطبيقات حالة استخدام شائعة. يتيح لك ذلك إعادة استخدام نفس منطق جلب البيانات عبر مكونات متعددة.

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

يمكنك بعد ذلك استخدام هذه الدالة القابلة للتركيب في مكوناتك على هذا النحو:

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

2. التحقق من صحة النماذج

التحقق من صحة النماذج هو مجال آخر يمكن أن تكون فيه واجهة برمجة تطبيقات التركيب مفيدة للغاية. يمكنك إنشاء دوال قابلة للتركيب تغلف منطق التحقق من الصحة وتعيد استخدامها عبر نماذج مختلفة.

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'This field is required'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Invalid email format'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

الاستخدام في مكون:

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

3. إدارة مصادقة المستخدم

غالبًا ما يكون منطق المصادقة معقدًا ومتكررًا عبر مكونات متعددة. تسمح لك واجهة برمجة تطبيقات التركيب بإنشاء دالة قابلة للتركيب تغلف كل منطق المصادقة وتوفر واجهة برمجة تطبيقات نظيفة لتستخدمها مكوناتك.

مثال: (مبسط)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

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

للحصول على أقصى استفادة من واجهة برمجة تطبيقات التركيب، ضع في اعتبارك أفضل الممارسات التالية:

• اجعل الدوال القابلة للتركيب مركزة: يجب أن يكون لكل دالة قابلة للتركيب غرض واحد محدد جيدًا. هذا يجعلها أسهل في الفهم وإعادة الاستخدام والاختبار.
• استخدم أسماء وصفية: اختر أسماء تشير بوضوح إلى الغرض من الدالة القابلة للتركيب. سيجعل هذا الكود الخاص بك أكثر قابلية للقراءة والصيانة.
• أعد فقط ما تحتاجه: أعد فقط الحالة التفاعلية والدوال التي يحتاجها المكون بالفعل. هذا يساعد على تقليل تعقيد مكوناتك وتحسين الأداء.
• فكر في استخدام TypeScript: يوفر TypeScript أمانًا ممتازًا للأنواع ويمكن أن يساعدك في اكتشاف الأخطاء في وقت مبكر من عملية التطوير. هذا مفيد بشكل خاص عند العمل مع واجهة برمجة تطبيقات التركيب.
• وثّق دوالك القابلة للتركيب: أضف تعليقات إلى دوالك القابلة للتركيب لشرح الغرض منها، وكيفية عملها، وأي تبعيات لديها. سيجعل هذا من السهل على المطورين الآخرين (وعلى نفسك في المستقبل) فهم واستخدام الكود الخاص بك.
• اختبر دوالك القابلة للتركيب: اكتب اختبارات الوحدات للتأكد من أن دوالك القابلة للتركيب تعمل بشكل صحيح. سيساعدك هذا على اكتشاف الأخطاء مبكرًا وتحسين الجودة الإجمالية لقاعدة التعليمات البرمجية الخاصة بك.
• استخدم نمطًا متسقًا: أنشئ نمطًا متسقًا لدوالك القابلة للتركيب والتزم به. سيجعل هذا الكود الخاص بك أكثر قابلية للقراءة والصيانة.

المزالق الشائعة وكيفية تجنبها

بينما تقدم واجهة برمجة تطبيقات التركيب العديد من الفوائد، هناك أيضًا بعض المزالق الشائعة التي يجب الانتباه إليها:

• الإفراط في تعقيد الدوال القابلة للتركيب: من السهل أن تنجرف وتنشئ دوال قابلة للتركيب معقدة للغاية. حاول أن تبقيها مركزة وبسيطة. إذا أصبحت دالة قابلة للتركيب كبيرة جدًا، ففكر في تقسيمها إلى أجزاء أصغر وأكثر قابلية للإدارة.
• مشاكل التفاعلية العرضية: تأكد من أنك تفهم كيفية عمل ref و reactive واستخدامهما بشكل صحيح. على سبيل المثال، يمكن أن يؤدي تعديل خاصية متداخلة لـ ref مباشرة دون فك تغليفها إلى سلوك غير متوقع.
• الاستخدام غير الصحيح لخطاطيف دورة الحياة: انتبه إلى توقيت خطاطيف دورة الحياة وتأكد من أنك تستخدمها بشكل مناسب. على سبيل المثال، لا تحاول الوصول إلى عناصر DOM في onBeforeMount، لأنها لم يتم إنشاؤها بعد.
• مشاكل الأداء مع watchEffect: كن على دراية بالتبعيات التي يتتبعها watchEffect. إذا تتبعت عددًا كبيرًا جدًا من التبعيات، فقد يؤدي ذلك إلى مشاكل في الأداء. فكر في استخدام watch بدلاً من ذلك لتحديد التبعيات التي تريد مراقبتها بشكل صريح.
• نسيان إلغاء تسجيل مستمعي الأحداث: عند استخدام مستمعي الأحداث داخل دالة قابلة للتركيب، تأكد من إلغاء تسجيلهم في خطاف onUnmounted لمنع تسرب الذاكرة.

واجهة برمجة تطبيقات التركيب والفرق العالمية

تعزز واجهة برمجة تطبيقات التركيب التعاون داخل فرق التطوير العالمية من خلال تشجيع ما يلي:

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

الخاتمة

تعد واجهة برمجة تطبيقات التركيب في Vue.js 3 أداة قوية يمكنها تحسين تنظيم تطبيقات Vue الخاصة بك وقابليتها لإعادة الاستخدام والاختبار بشكل كبير. من خلال فهم المفاهيم الأساسية واتباع أفضل الممارسات الموضحة في هذا الدليل المتعمق، يمكنك الاستفادة من واجهة برمجة تطبيقات التركيب لبناء تطبيقات أكثر قابلية للصيانة والتوسع لجمهور عالمي. احتضن واجهة برمجة تطبيقات التركيب واطلق العنان للإمكانات الكاملة لـ Vue.js 3.

نشجعك على تجربة واجهة برمجة تطبيقات التركيب في مشاريعك الخاصة واستكشاف الإمكانيات الهائلة التي توفرها. برمجة سعيدة!