PricingLoginStart free
Vue Academy · درس

VueUse: مكتبة Composables

‏useLocalStorage وuseMouse وuseWindowSize وuseIntersectionObserver — تطبيقات عملية من VueUse

الدرس 4 من 413 خطوة

VueUse: مكتبة Composables درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما هي VueUse

تُعدّ VueUse (@vueuse/core) مجموعة كبيرة من الدوال المركبة الجاهزة للمهام الشائعة، مثل التخزين والمستشعرات وواجهات المتصفح وغير ذلك. وهي توفر عليك إعادة ابتكار هذه الحلول.

npm install @vueuse/core

useLocalStorage للاستمرارية

تعيد useLocalStorage مرجعًا متزامنًا مع localStorage. وتستمر التغييرات تلقائيًا عبر عمليات إعادة التحميل، مع تولّي الدالة عملية التسلسل نيابةً عنك.

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

تفاعلية ومستديمة

يتصرف المرجع المُعاد مثل أي مرجع آخر، ويمكن ربطه باستخدام v-model، لكن قيمته تبقى بعد تحديث الصفحة لأن VueUse تكتب مباشرةً في التخزين.

<input v-model="name" />

useMouse لموضع المؤشر

تتتبّع useMouse المؤشر وتعيد مرجعَي x وy تفاعليين يتحدّثان مع حركة المؤشر.

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

عرض إحداثيات الفأرة

اربط المراجع في القالب؛ إذ تتحدّث مع كل حدث لتحريك الفأرة من دون أن تضطر إلى إعداد المستمعات بنفسك.

<p>Cursor: {{ x }}, {{ y }}</p>

useWindowSize لأبعاد النافذة

توفر useWindowSize مرجعَي width وheight تفاعليين، وتحدّثهما عند تغيير الحجم، مما يجعلها مناسبة جدًا للمنطق المتجاوب داخل الشيفرة.

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

المنطق المتجاوب

اجمع حجم النافذة مع قيمة محسوبة لاتخاذ قرارات التخطيط بصورة تفاعلية.

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

useIntersectionObserver للتحميل الكسول

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

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

التشغيل عند الظهور

مرّر مرجعًا للقالب ودالة استدعاء تُشغَّل مع سجلات التقاطع. وحمّل الصورة أو اجلب مزيدًا من البيانات عندما يصبح الهدف ظاهرًا.

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

التنظيف التلقائي

من أهم الفوائد أن الدوال المركبة في VueUse تسجّل مستمعاتها ومراقباتها الخاصة وتزيلها عند إزالة المكوّن. وبذلك تحصل على تنظيف صحيح تلقائيًا.

لماذا نستخدم VueUse

تدعم VueUse تقنية tree-shaking، وقد خضعت لاختبارات جيدة، وتعتمد TypeScript أولًا. وللاحتياجات الشائعة مثل التخزين والمستشعرات والشبكة والوقت، استخدم VueUse قبل كتابة دالتك المركبة.

اختبار سريع

أي دالة مركبة من VueUse تحفظ ref في localStorage؟

أجب عليها في الدرس التفاعلي

مراجعة

استعرضت VueUse: useLocalStorage (حالة مستديمة)، وuseMouse (موضع المؤشر)، وuseWindowSize (أبعاد تفاعلية)، وuseIntersectionObserver (مُشغّل للتحميل الكسول)، وكلها توفر تنظيفًا تلقائيًا وتدعم tree-shaking.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات
42
الدروس
156
ابدأ التعلم مجانًاعرض الدورة الكاملة

الأسئلة الشائعة

هل درس «VueUse: مكتبة Composables» مجاني؟

نعم — نص درس «VueUse: مكتبة Composables» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «VueUse: مكتبة Composables»؟

‏useLocalStorage وuseMouse وuseWindowSize وuseIntersectionObserver — تطبيقات عملية من VueUse تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «VueUse: مكتبة Composables»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. ما الذي يجعل Composable جيدًا؟
  2. useCounter: دالة Composable بسيطة
  3. useFetch: دالة Composable للبيانات غير المتزامنة
  4. VueUse: مكتبة Composables
← العودة إلى Vue Academy