مكتبة VueUse: الكنز المفقود لمطوري Vue 3 ووقتك

أهلاً بيك يا صديقي المبرمج في مقال جديد. لو انت شغال بقالك فترة بـ تطوير الـ ويب (Web Development) وبتستخدم إطار العمل ڤيوه (Vue.js 3)، فغالباً عانيت في نقطة معينة من تكرار كتابة نفس الكود كل ما تحب تتعامل مع حاجة زي تخزين البيانات المحلي (LocalStorage)، أو تتابع حركة الماوس (Mouse Tracking)، أو حتى تراقب حجم الشاشة (Window Size). بتقعد تكتب كود جافاسكريبت (JavaScript) كتير، وتتعامل مع الـ Lifecycle Hooks، والقصص دي كلها بتاخد وقت ومجهود كبير من طاقتك اللي المفروض تروح في بناء الـ Business Logic بتاع التطبيق.

عشان كده، جاي النهارده أكلمك عن "الكنز المفقود" اللي هيخليك تضرب كف بـ كف وتقول "أنا ضيعت وقت قد ايه من غيره؟". هنتكلم عن مكتبة VueUse، وهي عبارة عن مجموعة ضخمة من الدوال التفاعلية الجاهزة (Composition Functions أو Composables) المبنية خصيصاً عشان تسحب من عليك هم الشغل المتكرر في Vue 3.

إيه هي مكتبة VueUse وليه لازم تبدأ استخدامها فوراً؟

باختصار شديد، مكتبة VueUse هي عبارة عن جمعية خيرية للمبرمجين، بس بدل الفلوس، بتقدم لك حلول برمجية جاهزة. هي مكتبة مفتوحة المصدر (Open Source) مبنية على أساس الـ Composition API الخاص بـ Vue 3. فكرتها ببساطة: بدل ما تقعد تختع العجلة من أول وجديد، وتكتب كود معقد عشان تعمل حاجة معينة، الـ Maintainers بتوع المكتبة كتبوا الكود ده ونضفوه وظبطوه بحيث يكون آمن، سريع، ويدعم الـ TypeScript، وكل اللي عليك تعملو انك تستدعي الدالة وتشتغل بيها علطول.

المكتبة دي بتوفر مئات الـ Composables اللي بتغطي تقريباً كل حاجة ممكن تتخيلها؛ ابتداءً من الحاجات البسيطة زي قراءة الـ LocalStorage وانتهاءً بالحاجات المعقدة زي مستشعرات الجهاز (Sensors)، الـ Animations، والـ State Management.

أمثلة عملية: إزاي تخلي حياتك أسهل مع VueUse؟

تعال ناخد أمثلة حية من الشغل اليومي ونشوف الفرق بين الطريقة العادية والطريقة باستخدام VueUse.

1. التعامل مع الـ LocalStorage بكل بساطة

زمان، عشان تخزن قيمة في الـ LocalStorage وتخلي الـ Component يتحدث أول بأول، كنت محتاج تكتب كود فيه ref وتعمل watch على التغييرات، وتكتب في الـ LocalStorage وتجيب منه. شوف بقى الطريقة مع دالة useStorage من VueUse:

<script setup>
import { useStorage } from '@vueuse/core'

// المتغير ده مربوط تلقائياً بـ LocalStorage واسمه 'my-todo'
const myTodo = useStorage('my-todo', 'اكتب هنا المهمة بتاعتك')
</script>

<template>
  <div>
    <input v-model="myTodo" type="text" />
    <p>القيمة المخزنة: {{ myTodo }}</p>
  </div>
</template>

بس كده! متغير واحد عمل الشغل كله. أي تعديل بيحصل في الـ input بيتخزن لوحده في الـ LocalStorage، ولو عملت Refresh للصفحة، القيمة بتفضل موجودة من غير سطر كود إضافي.

2. تتبع حركة الماوس (Mouse Tracking)

لو في يوم طلب منك العميل أو الـ UI/UX Designer إنك تعمل تأثير معين بيتحرك مع حركة الماوس، كنت هتضطر تعمل addEventListener للـ mousemove وتحدث الـ state، وماتنساش تعمل removeEventListener عشان ما تعملش Memory Leak في الذاكرة. مع دالة useMouse الموضوع بينتهي في سطر واحد:

<script setup>
import { useMouse } from '@vueuse/core'

// بنستخرج إحداثيات الـ X والـ Y مباشرة
const { x, y } = useMouse()
</script>

<template>
  <div>
    <p>موقع الماوس الحالي هو: X: {{ x }} , Y: {{ y }}</p>
  </div>
</template>

الكود نظيف، مفيش خوف من الـ Memory Leaks، والمكتبة هي اللي بتدير الـ Lifecycle خلف الكواليس.

نصيحة من أخ: إزاي تطور مهاراتك التقنية مع المكتبات دي؟

بص يا صديقي، نصيحتي ليك كـ مبرمج عايز يحترف مجال الـ Web Development: ماتستسهلش وتعتمد على المكتبات من غير ما تفهم هي شغال إزاي جوه. مكتبة VueUse كودها مبني بطريقة احترافية جداً ومصدر إلهام لأي حد عايز يتعلم إزاي يعمل Custom Composables في Vue 3.

ادخل على الـ Documentation بتاعتهم، اقرأ الكود المصدر (Source Code) لبعض الـ Composables البسيطة، وشوف هما بيتعاملوا إزاي مع الـ DOM والـ Memory. الحركة دي هتنقل مستوي تفكيرك البرمجي من مجرد شخص بيستخدم أدوات، لشخص فاهم المعمارية (Architecture) بتاعة إطار العمل صح. ابدأ طبق بـ مثال واحد بس في مشروعك الجาย من المكتبة دي، وهتحس بالفرق في الإنتاجية من أول يوم!