ما الذي يجعل Composable جيدًا؟
اصطلاح التسمية (useName)، وتغليف الحالة التفاعلية، وإرجاع المراجع بدلًا من القيم الخام
ما الذي يجعل Composable جيدًا؟ درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
ما هو Composable
إن composable دالة تستخدم Composition API في Vue لتغليف المنطق ذي الحالة وإعادة استخدامه. وهو الحل المقابل في Vue 3 للـ mixins، إذ يتميز بكونه أوضح وأكثر صراحة وملاءمة للأنواع.
استخدام اصطلاح البادئة use
وفقًا للعرف، تُسمّى الدوال المركبة ببادئة use: useCounter وuseFetch وuseMouse. وهذا يشير فورًا إلى أن الدالة تحتوي على منطق تفاعلي.
function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }إرجاع refs، لا القيم الخام
أعِد refs (أو حالة تفاعلية) لكي يحافظ المستهلكون على التفاعلية عند تفكيكها. إذ إن إرجاع count.value سيعيد لقطة ثابتة لا تتحدّث مطلقًا.
function useCounter() {
const count = ref(0);
return { count }; // return the ref itself
}التفكيك الآمن
بما أنك تعيد refs، يمكن للمستهلك تفكيكها بحرية من دون فقدان التفاعلية. ويحافظ كل ref على اتصاله التفاعلي الخاص.
const { count } = useCounter();
// count stays reactive after destructuringالمسؤولية الواحدة
ينبغي أن تؤدي الدالة المركبة الجيدة شيئًا واحدًا. تتولى useFetch جلب البيانات، بينما تتولى useLocalStorage حفظها. ويمكن تركيب الدوال المركبة الصغيرة والمركزة لبناء ميزات أكبر بطريقة منظمة.
تركيب الدوال المركبة
يمكن للدوال المركبة استدعاء دوال مركبة أخرى، ما يتيح بناء منطق متعدد الطبقات. فقد تستخدم useUserProfile الدالة useFetch داخليًا.
function useUserProfile(id) {
const { data } = useFetch("/users/" + id);
return { user: data };
}تنظيف التأثيرات الجانبية
إذا أضافت الدالة المركبة مستمعات أو مؤقتات أو اشتراكات، فيجب أن تزيلها في onUnmounted لمنع تسرّب الذاكرة.
import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));قبول الوسائط التفاعلية
يمكن للدوال المركبة قبول refs أو دوال getter كمدخلات، والتفاعل معها باستخدام watch أو watchEffect، مما يجعلها مرنة.
function useDouble(source) {
return computed(() => unref(source) * 2);
}تجنّب تعارضات الأسماء
عندما تعيد الدالة المركبة قيمًا كثيرة، استخدم أسماء واضحة. وإذا أعادت دالتان مركبتان data، فأعد تسمية القيمة عند التفكيك لتجنب التعارض.
const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");الالتزام بأسلوب إطار العمل
استدعِ الدوال المركبة بشكل متزامن في المستوى الأعلى من setup (أو من دالة مركبة أخرى)، وليس داخل الشروط أو دوال الاستدعاء غير المتزامنة، حتى تُسجَّل خطافات دورة الحياة بشكل صحيح.
// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after awaitالتوثيق وبنية القيمة المُعادة
أعِد كائنًا ذا بنية متوقعة حتى يعرف المستهلكون ما سيحصلون عليه. فالبنية المتسقة (الحالة بالإضافة إلى الدوال) تجعل الدوال المركبة سهلة التعلم والاستخدام.
return { count, increment, decrement, reset };اختبار سريع
لماذا ينبغي للدالة المركبة إرجاع refs بدلًا من القيم الخام؟
مراجعة
تعلّمت سمات الدالة المركبة الجيدة: استخدام البادئة use، وإرجاع refs لتفكيكها بأمان، وتطبيق مبدأ المسؤولية الواحدة، وتنظيف التأثيرات الجانبية في onUnmounted، وتجنب تعارضات الأسماء في الكائن المُعاد.
الأسئلة الشائعة
هل درس «ما الذي يجعل Composable جيدًا؟» مجاني؟
نعم — نص درس «ما الذي يجعل Composable جيدًا؟» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «ما الذي يجعل Composable جيدًا؟»؟
اصطلاح التسمية (useName)، وتغليف الحالة التفاعلية، وإرجاع المراجع بدلًا من القيم الخام تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «ما الذي يجعل Composable جيدًا؟»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- ما الذي يجعل Composable جيدًا؟
- useCounter: دالة Composable بسيطة
- useFetch: دالة Composable للبيانات غير المتزامنة
- VueUse: مكتبة Composables