استيراد Composables واستخدامها في script setup
استيراد Composables، واستخدام Composables التابعة لجهات خارجية من VueUse، وتنظيم الاستيرادات
استيراد Composables واستخدامها في script setup درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
Composables وscript setup
Composables هي دوال تجمع المنطق التفاعلي لإعادة استخدامه. ومع <script setup>، لاستخدامها يكفي استيرادها واستدعاؤها في المستوى الأعلى.
الاستيراد في المستوى الأعلى
استدعِ composable دائمًا في المستوى الأعلى من <script setup> — وليس داخل شرط أو حلقة أو دالة متداخلة. فهذا يضمن تسجيل Vue لتفاعليتها وخطافات دورة حياتها بشكل صحيح.
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>أهمية المستوى الأعلى
تسجّل Composables غالبًا خطافات دورة الحياة مثل onMounted أو تنشئ أدوات مراقبة. ويجب أن تُنفَّذ هذه العمليات أثناء إعداد المكوّن، ولا يحدث ذلك إلا عند استدعاء composable بشكل متزامن في المستوى الأعلى.
فكّك ما تحتاج إليه
يعيد composable كائنًا من القيم التفاعلية والدوال. فكّك العناصر التي يستخدمها المكوّن فقط، وأعد تسميتها لتجنب التعارض عند استدعاء composable نفسه مرتين.
<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>تعرّف إلى VueUse
إن VueUse مكتبة شائعة من Composables الجاهزة. وبدلًا من كتابة المنطق الشائع بنفسك، استورد composable مُختبرًا. ثبّت المكتبة مرة واحدة، ثم استورد ما تحتاج إليه.
<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>استخدام useLocalStorage عمليًا
تعيد useLocalStorage مرجعًا متزامنًا مع localStorage. غيّر قيمة المرجع فتتحدث مساحة التخزين في المتصفح، وأعد تحميل الصفحة لتجد أن القيمة ما زالت محفوظة.
<template>
<input v-model="name" />
<p>Saved: {{ name }}</p>
</template>استخدام useMouse للإحداثيات التفاعلية
تتتبع useMouse موضع المؤشر باعتباره مراجع تفاعلية. وتضيف مستمع الأحداث وتزيله نيابةً عنك، لذلك لن تضطر إلى إدارة التنظيف يدويًا.
<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>
<template>
<p>{{ x }}, {{ y }}</p>
</template>تركيب composables
يمكن لـ composable استدعاء composables أخرى. ويشكّل هذا التدرج جوهر Composition API — إذ تبني أجزاءً صغيرة وتجمعها في ميزات أكبر.
import { useMouse } from '@vueuse/core'
export function useMouseDistance() {
const { x, y } = useMouse()
const distance = computed(() => Math.hypot(x.value, y.value))
return { distance }
}await في المستوى الأعلى
يدعم <script setup> استخدام await مباشرةً في المستوى الأعلى. ويصبح إعداد المكوّن غير متزامن، ويمكن لإطار العمل تعليق العرض حتى يُحسم الوعد.
<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>استخدام Suspense مع إعداد غير متزامن
يجب أن يغلّف المكوّن الذي يستخدم await في المستوى الأعلى بحد <Suspense> من المكوّن الأب. ويعرض Suspense محتوى بديلًا حتى يكتمل الإعداد غير المتزامن.
<template>
<Suspense>
<AsyncUser />
<template #fallback>Loading...</template>
</Suspense>
</template>أفضل الممارسات
- سمِّ Composables باستخدام السابقة
use. - استدعها في المستوى الأعلى فقط.
- أعِد مراجع refs، أو كائنًا من
reactiveمغلفًا بـtoRefs. - فضّل VueUse للاحتياجات الشائعة قبل كتابة composable خاص بك.
اختبار سريع
تأكد من فهمك لـ Composables.
مراجعة
تعلّمت استخدام Composables:
- استوردها واستدعها في المستوى الأعلى من
<script setup>. - فكّك ما تحتاج إليه وأعد تسميته.
- توفر VueUse Composables جاهزة مثل
useLocalStorageوuseMouse. - يجعل
awaitفي المستوى الأعلى الإعداد غير متزامن، ويتكامل مع<Suspense>.
الأسئلة الشائعة
هل درس «استيراد Composables واستخدامها في script setup» مجاني؟
نعم — نص درس «استيراد Composables واستخدامها في script setup» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «استيراد Composables واستخدامها في script setup»؟
استيراد Composables، واستخدام Composables التابعة لجهات خارجية من VueUse، وتنظيم الاستيرادات تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «استيراد Composables واستخدامها في script setup»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مقدمة إلى script setup
- defineProps وdefineEmits
- defineExpose وuseAttrs
- استيراد Composables واستخدامها في script setup