composable هي دالة قابلة لإعادة الاستخدام تغلف منطق stateful باستخدام Composition API. بحسب الاتفاق، تُسمى useXxx وتُرجع حالة reactive بالإضافة إلى دوال — مما يتيح لك مشاركة المنطق عبر المكونات دون mixins أو تكرار.
{ ref, computed } ;
() {
count = (initial);
double = ( count. * );
() { count.++; }
() { count. = initial; }
{ count, double, increment, reset };
}
<script setup>
import { useCounter } from "@/composables/useCounter";
const { count, double, increment } = useCounter(10); // each call = independent state
</script>
<template>
<button @click="increment">{{ count }} (double: {{ double }})</button>
</template>
كل مكون يستدعي useCounter() يحصل على عزل خاص به count — composables تنشئ حالة جديدة في كل استدعاء، على عكس متغير على مستوى الوحدة المشترك.
import { ref, onUnmounted } from "vue";
export function useMousePosition() {
const x = ref(0), y = ref(0);
const update = (e) => { x.value = e.pageX; y.value = e.pageY; };
window.addEventListener("mousemove", update); // set up
onUnmounted(() => window.removeEventListener("mousemove", update)); // auto cleanup!
return { x, y };
}
Composables يمكنها استخدام lifecycle hooks، watchers، وcomposables أخرى — والأهم، أنها تغلف cleanup الخاصة بها (onUnmounted)، لذلك لا يتعين على المستهلكين تذكرها.
Mixins (Vue 2): merged into the component — unclear where properties came from,
naming collisions between mixins, implicit dependencies
Composables: explicit imports + return values — clear sources, no collisions,
can be composed, fully typed in TypeScript
Composables هي الطريقة الاصطلاحية لاستخراج وإعادة استخدام منطق stateful في Vue 3 — جلب البيانات، معالجة النماذج، تتبع الماوس/التمرير، debouncing، إلخ.
تحل مشكلة إعادة استخدام المنطق بشكل نظيف (صريح، خالي من التصادمات، قابل للتركيب، صديق TypeScript) حيث فشلت mixins في Vue 2.
هي السبب الأساسي لاعتماد الفرق على Composition API: المنطق المشترك يصبح دالة بسيطة وقابلة للاختبار بدلاً من كود متفرق أو مكرر.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع