التمرير الافتراضي للقوائم الكبيرة
vue-virtual-scroller وRecycleScroller، وعرض العناصر بارتفاع ثابت أو متغير
التمرير الافتراضي للقوائم الكبيرة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
مشكلة القوائم الكبيرة
يُعد تصيير آلاف عقد DOM بطيئًا ويستهلك قدرًا كبيرًا من الذاكرة. لا يَصيّر التمرير الافتراضي إلا العناصر الظاهرة حاليًا في إطار العرض، مع إعادة استخدام عقد DOM أثناء التمرير.
تثبيت vue-virtual-scroller
من المكتبات الشائعة vue-virtual-scroller. ثبّتها واستورد تنسيقاتها.
npm install vue-virtual-scrollerتسجيل المكوّن
استورد RecycleScroller وملف CSS الخاص به، ثم استخدمه في المكوّن.
import { RecycleScroller } from "vue-virtual-scroller";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";خاصية items
يتلقى RecycleScroller مصفوفة بياناتك الكاملة عبر خاصية items. ولا يَصيّر جميع العناصر دفعة واحدة، بل نافذة العناصر الظاهرة فقط.
<RecycleScroller :items="rows" />خاصية item-size
تخبر item-size أداة التمرير بارتفاع كل صف بالبكسل. وباستخدام حجم ثابت، يمكنها حساب النطاق الظاهر وارتفاع التمرير الإجمالي فورًا.
<RecycleScroller
:items="rows"
:item-size="48"
/>خاصية key-field
امنح كل عنصر هوية ثابتة باستخدام key-field حتى تُطابق العقد المعاد استخدامها البيانات بشكل صحيح.
<RecycleScroller
:items="rows"
:item-size="48"
key-field="id"
/>قالب العناصر باستخدام v-slot
استخدم scoped slot الافتراضية لتصيير كل عنصر ظاهر. وتكشف slot عن العنصر الحالي item.
<RecycleScroller :items="rows" :item-size="48" key-field="id">
<template v-slot="{ item }">
<div class="row">{{ item.name }}</div>
</template>
</RecycleScroller>تُصيَّر العناصر الظاهرة فقط
أثناء التمرير، يركّب أداة التمرير العناصر الداخلة إلى إطار العرض ويفك تركيب العناصر الخارجة منه. ويظل عدد عقد DOM صغيرًا مهما كان طول القائمة.
ارتفاع العناصر الثابت والمتغير
تُعد الارتفاعات الثابتة الأسرع لأن حساب المواضع يتم بعمليات حسابية مباشرة. أما عندما تختلف ارتفاعات الصفوف، فتحتاج إلى نهج مختلف.
التعامل مع الارتفاعات المتغيرة
للتعامل مع الارتفاعات المتغيرة، استخدم DynamicScroller مع DynamicScrollerItem؛ إذ يقيس العناصر المصيّرة ويعدّل مواضعها.
import { DynamicScroller, DynamicScrollerItem } from "vue-virtual-scroller";
<DynamicScroller :items="rows" :min-item-size="40" key-field="id">
<template v-slot="{ item, active }">
<DynamicScrollerItem :item="item" :active="active">
<div>{{ item.text }}</div>
</DynamicScrollerItem>
</template>
</DynamicScroller>المفاضلات
يجعل التمرير الافتراضي ميزات مثل البحث داخل الصفحة (Ctrl+F)، والروابط المرساة إلى العناصر خارج إطار العرض، وإمكانية الوصول أكثر تعقيدًا. استخدمه فقط عندما تكون القوائم كبيرة فعلًا.
تحقق سريع
ما الذي يَصيّره RecycleScroller فعليًا في DOM؟
مراجعة
يصيّر التمرير الافتراضي باستخدام RecycleScroller من vue-virtual-scroller العناصر الظاهرة فقط. مرّر البيانات عبر items، واضبط item-size وkey-field، وصيّر كل صف داخل قالب v-slot. استخدم الارتفاعات الثابتة للسرعة، أو DynamicScroller للارتفاعات المتغيرة، واقصر هذه التقنية على القوائم الكبيرة فعلًا.
الأسئلة الشائعة
هل درس «التمرير الافتراضي للقوائم الكبيرة» مجاني؟
نعم — نص درس «التمرير الافتراضي للقوائم الكبيرة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «التمرير الافتراضي للقوائم الكبيرة»؟
vue-virtual-scroller وRecycleScroller، وعرض العناصر بارتفاع ثابت أو متغير تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «التمرير الافتراضي للقوائم الكبيرة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- v-memo للتخزين المؤقت للقوالب
- تحليل الأداء باستخدام تبويب Performance في Vue DevTools
- التمرير الافتراضي للقوائم الكبيرة
- Web Workers مع Vue