الترحيل إلى Vue 3 Composition API لتطوير المكونات بشكل أفضل

نظرًا لأن منشئي Vue أعلنوا أن Vue 2 سيصل إلى نهاية عمره بحلول 31 ديسمبر 2023، فإننا نشجع المطورين على التبديل إلى Vue 3.

مع هذا الانتقال، تأتي واجهة برمجة التطبيقات Composition API، وهي ميزة توفر أسلوبًا أكثر نمطية وتعريفية وآمنة للكتابة لبناء تطبيقات Vue.

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

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

الدافع لتكوين API

لقد أدرك منشئو Vue التحديات عند إنشاء تطبيقات ويب معقدة باستخدام كائن الخيارات. مع نمو المشاريع، أصبحت إدارة منطق المكون أقل قابلية للتطوير وأصعب في الصيانة، خاصة في البيئات التعاونية.

غالبًا ما أدى نهج كائن الخيارات التقليدي إلى العديد من خصائص المكونات، مما يجعل من الصعب فهم التعليمات البرمجية والحفاظ عليها.

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

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

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

1. تحسين الأداء

يقدم Vue 3 آلية عرض جديدة تسمى نظام التفاعل القائم على الوكيل. يوفر هذا النظام أداءً أفضل عن طريق تقليل استهلاك الذاكرة وتحسين التفاعل. يمكّن نظام التفاعل الجديد Vue 3 من التعامل مع المزيد من أشجار المكونات العملاقة بكفاءة أكبر.

2. حجم الحزمة الأصغر

بفضل قاعدة التعليمات البرمجية المحسنة ودعم اهتزاز الأشجار، يتمتع Vue 3 بحجم حزمة أصغر من Vue 2. يؤدي هذا الانخفاض في حجم الحزمة إلى أوقات تحميل أسرع وتحسين الأداء.

3. تحسين تنظيم الكود

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

4. إعادة استخدام المكونات والوظائف

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

5. دعم أفضل لـ TypeScript

توفر واجهة برمجة تطبيقات Composition دعمًا أكثر شمولاً لـ TypeScript، مما يتيح استنتاجًا أكثر دقة للنوع وتحديدًا أسهل للأخطاء المتعلقة بالنوع أثناء التطوير.

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

الآن بعد أن فهمت النظرية وراء Composition API، يمكنك البدء في استخدامها عمليًا. لفهم مزايا Composition API، دعونا نقارن بعض الجوانب الرئيسية لكلا الطريقتين.

البيانات التفاعلية في Vue 3

تعد البيانات التفاعلية مفهومًا أساسيًا في Vue يسمح بتغييرات البيانات في تطبيقك بتشغيل التحديثات في واجهة المستخدم تلقائيًا.

يعتمد Vue 2 على نظامه التفاعلي على Object.defineProperty الطريقة واعتمدت على كائن بيانات يحتوي على جميع الخصائص التفاعلية.

عندما تحدد خاصية بيانات باستخدام خيار البيانات في مكون Vue، تقوم Vue تلقائيًا بتغليف كل خاصية في كائن البيانات باستخدام الحروف والمحددات، وهي ميزة ECMA Script (ES6) جديدة.

قامت هذه الحروف والمحددات بتتبع التبعيات بين الخصائص وتحديث واجهة المستخدم عند تعديل أي خاصية.

فيما يلي مثال لكيفية إنشاء بيانات تفاعلية في Vue 2 باستخدام كائن الخيارات: