إتقان Vue 3 Composition API

يمثل Composition API في Vue 3 تحولًا نموذجيًا في كيفية كتابة مكونات Vue. إنه يوفر تنظيمًا أفضل للكود ودعمًا محسنًا لـ TypeScript وقابلية إعادة استخدام محسنة.

ما هو 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 }
  }
}

التفاعلية مع ref و reactive

يوفر Vue 3 طريقتين رئيسيتين لإنشاء حالة تفاعلية:

• ref() - للقيم البدائية والمراجع الفردية
• reactive() - للكائنات والمصفوفات

Composables

واحدة من أكبر مزايا Composition API هي القدرة على استخراج وإعادة استخدام المنطق عبر المكونات باستخدام composables:

function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  const decrement = () => count.value--

  return { count, increment, decrement }
}

خطافات دورة الحياة

يتم إضافة بادئة "on" إلى خطافات دورة الحياة في Composition API:

• onMounted()
• onUpdated()
• onUnmounted()

الخلاصة

يجعل Composition API Vue 3 أكثر قوة ومرونة. بينما لا يزال Options API يعمل، فإن Composition API هو النهج الموصى به للمشاريع الجديدة.