كسر حاجز Vue 3: دليل شامل لواجهة برمجة التطبيقات Composition API

لسنوات عديدة، كانت واجهة برمجة التطبيقات Options API هي الطريقة القياسية لتنظيم المنطق في تطبيقات Vue.js. وعلى الرغم من فعاليتها في المكونات صغيرة ومتوسطة الحجم، إلا أنها كانت تؤدي غالباً إلى ما يُعرف بـ "حساء الخيارات" في المشاريع المعقدة، حيث كان المنطق المترابط مشتتاً عبر خصائص data و methods و watchers. هنا تأتي واجهة برمجة التطبيقات Composition API، وهي مجموعة من واجهات برمجة التطبيقات التي تتيح لك كتابة مكونات Vue باستخدام دوال مستوردة بدلاً من الإعلان عن خيارات.

في هذا المنشور، سنستكشف سبب كون واجهة برمجة التطبيقات Composition API نقطة تحول للتطبيقات واسعة النطاق، وكيفية الاستفادة من مبادئها التفاعلية، وتقديم أمثلة برمجية عملية لمساعدتك في الانتقال إلى سير عمل جديد.

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

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

علاوة على ذلك، تم بناء واجهة برمجة التطبيقات Composition API فوق جافا سكريبت القياسية. فهي توفر دعماً أفضل لاستنتاج TypeScript وتسمح للمطورين باستخراج المنطق القابل لإعادة الاستخدام إلى مركبات مخصصة (composables) — وهي إجابة Vue بشكل أساسي لـ React Hooks، ولكن مع تتبع تفاعلي أكثر بديهية.

المفاهيم الأساسية: Ref و Reactive

لاستخدام واجهة برمجة التطبيقات Composition API، تحتاج إلى فهم مبادئها التفاعلية الرئيسية: ref و reactive. على الرغم من أن كلاهما يجعل الحالة تفاعلية، إلا أنهما يخدمان حالات استخدام مختلفة.

يُستخدم ref لاحتواء القيم البدائية (السلاسل، الأرقام، القيم المنطقية) أو الكائنات. عندما تصل إلى ref في القالب، تقوم Vue بفك تغليفه تلقائياً. ومع ذلك، في جافا سكريبت، يجب الوصول إلى القيمة عبر خاصية .value.

ينشئ reactive وكيل تفاعلي (proxy) لكائن. إنه مثالي للهياكل البيانات المعقدة، ولكنه لا يمكن أن يحل محل مرجع الكائن الأصلي. يُفضل استخدامه بشكل عام للكائنات والمصفوفات.

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

// استخدام ref لقيمة بدائية واحدة
const count = ref(0);

// استخدام reactive لكائن
const user = reactive({
  name: 'Alice',
  email: 'alice@example.com',
  role: 'developer'
});

function increment() {
  // الوصول إلى .value لتعديل ref
  count.value++;
}

function changeRole(newRole) {
  // الوصول المباشر للكائنات التفاعلية
  user.role = newRole;
}
</script>

<template>
  <div>
    <p>العدد: {{ count }}</p>
    <p>دور المستخدم: {{ user.role }}</p>
    <button @click="increment">زيادة</button>
  </div>
</template>

المركبات (Composables): استخراج المنطق

إحدى أقوى ميزات واجهة برمجة التطبيقات Composition API هي القدرة على إنشاء مركبات (composables). المركب هو ببساطة دالة تستخدم واجهات برمجة التطبيقات Composition API في Vue لتغليف وإعادة استخدام المنطق ذي الحالة. هذا يعزز معمارية "اهتمام واحد لكل ملف".

على سبيل المثال، بدلاً من خلط منطق جلب البيانات من واجهة برمجة التطبيقات داخل مكونك، يمكنك إنشاء مركب useFetch.

useFetch.js
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);
      if (!response.ok) throw new Error('Network response was not ok');
      data.value = await response.json();
    } catch (e) {
      error.value = e.message;
    } finally {
      loading.value = false;
    }
  });

  return { data, error, loading };
}

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

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

const { data, error, loading } = useFetch('/api/users');
</script>

أفضل الممارسات للتبني

عند الترحيل أو بدء مشاريع جديدة، ضع في اعتبارك أفضل الممارسات التالية:

1. استخدم <script setup>: يوفر هذا الماكرو للمترجم صيغة أكثر إيجازاً لاستخدام واجهة برمجة التطبيقات Composition API، مما يلغي الحاجة إلى إرجاع المتغيرات من دالة الإعداد (setup).
2. حافظ على تركيز المركبات: يجب أن يتعامل كل مركب مع مسؤولية واحدة فقط، مثل التعامل مع حالة النموذج، أو إجراء مكالمات واجهة برمجة التطبيقات، أو إدارة أحداث السحب والإفلات.
3. افتراض استخدام Refs: على الرغم من أن reactive مفيد، إلا أن refs أكثر مرونة لأنها يمكن إعادة تعيينها بالكامل. استخدم reactive للكائنات المعقدة حيث تعدل الخصائص بعمق.

الخاتمة

واجهة برمجة التطبيقات Composition API في Vue 3 ليست مجرد صيغة جديدة؛ إنها تحول جذري في طريقة تفكيرنا في معمارية المكونات. من خلال تمكين تنظيم أفضل للكود، ودعم محسّن لـ TypeScript، وإعادة استخدام قوية للمنطق من خلال المركبات، فإنها تمكّن المطورين من بناء تطبيقات قابلة للتوسع وصيانتها وعالية الأداء.

سواء كنت ترحل تطبيق Vue 2 موجوداً أو تبدأ من الصفر مع Vue 3، فإن إتقان واجهة برمجة التطبيقات Composition API هو خطوة أساسية في رحلتك لتطوير الواجهات الأمامية. ابدأ بإعادة هيكلة مكون معقد واحد اليوم واختبر الفرق في الوضوح والهيكل.