v-memo للتخزين المؤقت للقوالب
توجيه v-memo، ومصفوفة التبعيات، وحالات تخطي إعادة العرض، ومقارنته بـ computed
v-memo للتخزين المؤقت للقوالب درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.
ما هو v-memo
يطبّق v-memo الحفظ المؤقت على جزء من القالب. يخزّن Vue الناتج المصيّر مؤقتاً، ولا يعيد تصيير تلك الشجرة الفرعية إلا عند تغيّر إحدى التبعيات المدرجة. وهو أداة لتحسين الأداء عند التعامل مع ترميز مكلف وثابت في معظمه.
مصفوفة التبعيات
تربطون مصفوفة من التبعيات. ما دامت كل قيمة في المصفوفة تساوي قيمتها السابقة، تتخطى Vue تحديث العنصر بأكمله وعناصره الفرعية.
<div v-memo="[dep1, dep2]">
<!-- skipped unless dep1 or dep2 change -->
</div>مصفوفة فارغة
تعني المصفوفة الفارغة v-memo="[]" أن المحتوى سيُصيّر مرة واحدة ولن يتحدّث أبداً، وهو ما يعادل تصيير محتوى ثابت مرة واحدة.
<div v-memo="[]">
<!-- rendered once, never re-rendered -->
</div>حالة الاستخدام الأساسية: v-for
السبب الرئيسي لاستخدام v-memo هو القوائم الضخمة. ضعوه داخل v-for حتى يعاد تصيير كل صف فقط عند تغيّر بياناته ذات الصلة.
<div
v-for="item in list"
:key="item.id"
v-memo="[item.id === selectedId]"
>
...
</div>الحفظ المؤقت للصف المحدد
في المثال التقليدي، لا يعاد تصيير آلاف الصفوف إلا عند تغيّر حالة تحديدها. وتعني مقارنة item.id === selectedId أن الصف يتحدّث فقط عند تحديده أو إلغاء تحديده.
<tr
v-for="item in items"
:key="item.id"
v-memo="[item.id === selectedId]"
>
<td :class="{ active: item.id === selectedId }">
{{ item.name }}
</td>
</tr>إدراج جميع التبعيات التفاعلية
يجب أن تدرجوا كل قيمة تفاعلية تعتمد عليها الشجرة الفرعية. فإذا نسيتم إحداها، فلن يتحدّث العنصر عند تغيّر تلك القيمة، مما يسبب خللاً خفياً يتمثل في بقاء واجهة المستخدم قديمة.
<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>لا تدمجوه مع v-if
لا تضعوا v-memo على العنصر نفسه مع v-if أو مع التوجيهات البنيوية الخاصة بـ v-for بطريقة متعارضة. وتحديداً، لا يُدعم وضع v-memo وv-if على العنصر نفسه، وينتج عنه سلوك غير محدد.
<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>v-memo في مقابل computed
تخزّن computed مؤقتاً قيمة مشتقة من حالة تفاعلية. أما v-memo فتخزّن مؤقتاً عناصر VNode المصيّرة. وهما يحلان مشكلتين مختلفتين: تتجنب computed إعادة حساب البيانات، بينما يتجنب v-memo إعادة تصيير الترميز.
متى تكون computed كافية
إذا كان عنق الزجاجة لديكم هو إعادة حساب البيانات، مثل التصفية أو الترتيب أو التنسيق، فاستخدموا computed أولاً، فهي أبسط وأصعب إساءة الاستخدام.
import { computed } from "vue";
const sorted = computed(() =>
[...items.value].sort((a, b) => a.rank - b.rank)
);متى يساعد v-memo
استخدموا v-memo فقط عندما يوضح قياس الأداء أن إعادة تصيير قائمة كبيرة تستحوذ على معظم الوقت، وأن معظم الصفوف لا تتغير بين التحديثات.
قيسوا الأداء أولاً
يضيف v-memo تكلفة من الذاكرة والمقارنة. وفي القوائم الصغيرة قد يكون أبطأ من التصيير العادي. قيسوا الأداء دائماً قبل الاستخدام وبعده للتأكد من تحقيق مكسب فعلي.
اختبار سريع
متى يكون v-memo الأداة المناسبة؟
خلاصة
يتخطى v-memo="[deps]" إعادة تصيير شجرة فرعية ما دامت جميع التبعيات المدرجة لم تتغير، ولذلك يناسب القوائم الكبيرة داخل v-for. أدرجوا كل تبعية تفاعلية، ولا تدمجوه أبداً مع v-if على العنصر نفسه، وفضّلوا computed للقيم المشتقة، وقيسوا الأداء دائماً للتأكد من تحقيق مكسب فعلي.
الأسئلة الشائعة
هل درس «v-memo للتخزين المؤقت للقوالب» مجاني؟
نعم — نص درس «v-memo للتخزين المؤقت للقوالب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.
ماذا ستتعلم في «v-memo للتخزين المؤقت للقوالب»؟
توجيه v-memo، ومصفوفة التبعيات، وحالات تخطي إعادة العرض، ومقارنته بـ computed تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟
لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «v-memo للتخزين المؤقت للقوالب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟
نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- v-memo للتخزين المؤقت للقوالب
- تحليل الأداء باستخدام تبويب Performance في Vue DevTools
- التمرير الافتراضي للقوائم الكبيرة
- Web Workers مع Vue