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

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

قيود واجهة برمجة التطبيقات الخيارات

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

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

تتيح لنا واجهة برمجة التطبيقات التركيبية تنظيم الكود بناءً على الاهتمامات المنطقية بدلاً من أنواع الخيارات. من خلال استخدام الدوال بدلاً من الخيارات، يمكننا تجميع المنطق ذي الصلة معاً. يدور جوهر هذه الواجهة حول البدائيات التفاعلية: ref وreactive، وخطاف دورة الحياة التي يتم استيرادها الآن من vue بدلاً من الوصول إليها عبر this.

لنلقِ نظرة على مثال عملي لتحويل عداد أساسي ونظام تحية من صيغة واجهة برمجة التطبيقات الخيارات إلى صيغة واجهة برمجة التطبيقات التركيبية.

مثال على الكود: التركيب الأساسي

<script setup>
import { ref, computed } from 'vue';

// حالة تفاعلية باستخدام ref
const count = ref(0);
const name = ref('Vue Developer');

// خاصية محسوبة
const greeting = computed(() => {
  return `Hello, ${name.value}! You have ${count.value} notifications.`;
});

// طريقة لتحديث الحالة
function increment() {
  count.value++;
}

function updateName(newName) {
  name.value = newName;
}
</script>

<template>
  <div>
    <p>{{ greeting }}</p>
    <button @click="increment">Increment</button>
    <input v-model="name" placeholder="Enter name" />
  </div>
</template>

لاحظ النظافة. تم تبسيط القالب باستخدام <script setup>، وهو ماكرو للمترجم يجعل الروابط على المستوى الأعلى في <script setup> متاحة تلقائياً في القالب. والأهم من ذلك، أن المنطق ذي الصلة (الحالة والدوال التي تعدل تلك الحالة) يعيش معاً، مما يجعلComponent أسهل في القراءة وتصحيح الأخطاء.

تعزيز إعادة الاستخدام باستخدام الدوال المركبة (Composables)

الميزة الأكثر أهمية لواجهة برمجة التطبيقات التركيبية هي القدرة على استخراج المنطق ذو الحالة وإعادة استخدامه. في واجهة برمجة التطبيقات الخيارات، كانت الميكس-ins (Mixins) هي الطريقة التقليدية لإعادة استخدام المنطق، لكنها عانت من تعارضات الأسماء وعدم وضوح مصدر البيانات. تقدم واجهة برمجة التطبيقات التركيبية الدوال المركبة (Composables)—وهي دوال تغلف المنطق القابل لإعادة الاستخدام.

الدالة المركبة هي دالة تستخدم واجهة برمجة التطبيقات التركيبية في فيو لتغليف وكشف الحالة التفاعلية. لأنها مجرد دالة، فإن لها مدخلاً واضحاً (الوسائط) ومخرجاً (القيم التفاعلية المعادة)، مما يحل مشاكل الغموض الخاصة بالميكس-ins.

مثال على الكود: إنشاء دالة مركبة

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
  }

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

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

  return { x, y };
}

الآن، يمكن لأي مكون استخدام منطق تتبع الماوس هذا دون تكرار مستمعي الأحداث أو كود خطاف دورة الحياة.

<script setup>
import { useMouse } from './useMouse';

const { x, y } = useMouse();
</script>

الخاتمة

واجهة برمجة التطبيقات التركيبية في فيو 3 ليست مجرد تغيير في الصياغة؛ إنها تحول نموذجي يمكّن المطورين من بناء تطبيقات أكثر قوة وقابلية للتوسع وقابلية للصيانة. من خلال السماح بالتجميع المنطقي للكود وتوفير أدوات قوية لاستخراج المنطق عبر الدوال المركبة، فإنها تعالج مشاكل القابلية للتوسع التي كانت تعيق مشاريع فيو 2 الأكبر حجماً. بالنسبة للمطورين من المستوى المتوسط إلى المتقدم، لم يعد إتقان واجهة برمجة التطبيقات التركيبية خياراً؛ بل هو أمر ضروري للبقاء في طليعة هندسة الواجهات الأمامية الحديثة.