إزاي تنظم كود Vue بتاعك باستخدام الـ Composables زي المحترفين؟

لو بتشتغل بـ Vue.js فترة، أكيد مريت باللحظة اللي بتفتح فيها ملف الـ Component بتاعك وبتلاقيه بقى "وحش" كبير (Spaghetti Code). الكود فيه تفاصيل كتير، الـ Logic مختلط بالـ UI، وكل ما تحاول تعدل حاجة، الدنيا بتبوظ في حتة تانية. هنا بيجي دور الـ Composables، اللي هي بجد "المنقذ" اللي هيخلي كودك نظيف، قابل للاختبار، والأهم من كده: قابل لإعادة الاستخدام (Reusable).

يعني إيه أصلاً Composables؟

ببساطة، الـ Composables هي دالة (Function) في Vue بتستخدم الـ Composition API عشان تعزل جزء من الـ Logic بتاعك. فكرة الـ Composables متأثرة جداً بـ الـ React Hooks، وهي الطريقة اللي Vue بتقدمها عشان نفصل الـ Business Logic عن الـ Components الأساسية. بدل ما نكتب كل حاجة جوه الـ setup function، بنفصل كل ميزة في ملف لوحده، وبنعمله استدعاء (Import) وقت ما نحتاجه.

ليه محتاج تستخدم الـ Composables؟

1. إعادة الاستخدام (Reusability): لو عندك Logic بيحسب حاجة معينة أو بيتعامل مع API، تقدر تستخدمه في 10 صفحات مختلفة من غير ما تكتب الكود 10 مرات.

2. سهولة الصيانة (Maintainability): لما تلاقي بج (Bug) في الـ Logic، بتصلحه في ملف واحد بس، مش بتلف على كل الكومبوننتس.

3. تنظيم الكود (Code Organization): الـ Component بتاعك بيبقى مركز بس على العرض (View)، مش على تفاصيل الـ State والـ Methods.

طريقة بناء الـ Composable الخاص بك

عشان تعمل Composable، لازم نلتزم بقاعدة تسمية بسيطة: لازم الاسم يبدأ بكلمة "use". تعال نشوف مثال عملي لـ Composable بيجيب بيانات من API:

// src/composables/useFetch.js
import { ref } from 'vue';

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

  const fetchData = async () => {
    try {
      const response = await fetch(url);
      data.value = await response.json();
    } catch (err) {
      error.value = err;
    }
  };

  fetchData();

  return { data, error };
}

إزاي تستخدم الـ Composable جوه الـ Component؟

استخدامه سهل جداً وبسيط، زي ما بنعمل import لأي دالة عادية:

// MyComponent.vue
<script setup>
import { useFetch } from '@/composables/useFetch';

const { data, error } = useFetch('https://api.example.com/user');
</script>

تخيل حجم الكود اللي وفرته في الـ Component! بدل ما تكتب الـ fetch والـ try-catch والـ ref والـ async كل مرة، سطور بسيطة عملت كل الشغل ده.

نصائح ذهبية عشان تبني Composables قوية

• استخدم الـ Composables للـ Logic بس: حاول متدخلش الـ DOM Manipulation جوه الـ Composable لو مش محتاج، عشان يفضل الكود مرن.
• رجع القيم كـ Ref أو Computed: عشان تحافظ على الـ Reactivity، لازم القيم اللي بترجعها تكون "Reactive".
• خلي الكود صغير ومحدد (Atomic): يعني الـ Composable يعمل وظيفة واحدة بس (Single Responsibility Principle)، ده بيخلي الكود أسهل في الاختبار (Unit Testing).

خاتمة: نصيحة من أخوك المبرمج

يا صديقي، الـ Composables مش مجرد "موضة" أو طريقة زيادة في الكتابة، دي مهارة هتفرق في مستواك التقني وفي جودة المشاريع اللي بتسلمها. في الأول ممكن تحس إن الموضوع "أوفر"، بس مع الوقت، لما تلاقي نفسك بتعدل الـ Logic الخاص بالـ Auth في دقيقة واحدة ومن مكان واحد، هتحس بقيمة اللي اتعلمته ده. ابدأ دلوقتي، حاول تاخد أي Logic متكرر في مشروعك وحوله لـ Composable، وشوف الفرق بنفسك.