مكون KeepAlive ​

<KeepAlive> هو مكون مدمج يسمح لنا بتخزين مؤقت لنسخ المكونات عند التبديل بين مكونات متعددة بشكل ديناميكي.

استعمال أساسي ​

في فصل أساسيات المكونات ، أدرجنا صيغة المكونات الديناميكية باستخدام عنصر <component> الخاص:

<component :is="activeComponent" />

افتراضيا، ستُفصل نسخة المكون النشط عند التبديل عنه. سيؤدي ذلك إلى فقدان أي حالة غُيِّرت عند عرض هذا المكون مرة أخرى، ستنشأ نسخة جديدة من المكون مع حالته الأولية فقط.

في المثال أدناه، لدينا مكونين ذوي حالة - يحتوي المكون A على عداد، بينما يحتوي B على رسالة متزامنة مع إدخال عبر v-model. حاول تحديث حالة أحدهما، والتبديل عنه، ثم الرجوع مرة أخرى إليه:

ستلاحظ أنه عند الرجوع إليه، سيُعاد تعيين الحالة السابقة التي غُيِّرت.

إن إنشاء نسخة جديدة من المكون عند التبديل هو سلوك مفيد عادة، لكن في هذه الحالة، نود حقا أن يحتفظ بنسختين من المكون حتى عندما تكونا غير نشطتين. لحل هذه المشكلة، يمكننا تغليف المكون الديناميكي بمكون <KeepAlive> المدمج:

<!-- المكونات غير النشطة ستُخزن مؤقتا! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

الآن، سيحتفظ بالحالة عبر التبديل بين المكونات:

التضمين / استبعاد ​

افتراضيا، ستخزن أي نسخة للمكون داخل <KeepAlive>، ويمكننا تخصيص هذا السلوك عبر التوابع include و exclude. يمكن أن تكون كلتا الخاصيتين عبارة عن سلسلة نصية مفصولة بفواصل، تعبير نمطي RegExp، أو مصفوفة تحتوي كلا النوعين:

<!-- سلسلة نصية مفصولة بفواصل -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- تعبير نمطي (استخدم `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- مصفوفة (استخدم `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

يُتحقق من التطابق عبر خيار name للمكون، لذا يجب على المكونات التي تحتاج إلى التخزين الشرطي عبر KeepAlive التعريف بخيار name بشكل صريح.

الحد الأقصى للنسخ المخزنة ​

يمكننا تحديد الحد الأقصى لعدد النسخ المخزنة عبر خاصية max. عند تحديد max، ستتصرف <KeepAlive> كـذاكرة تخزين مؤقت: إذا كان عدد النسخ المخزنة قريبًا من الوصول إلى الحد الأقصى المحدد، ستُفصل النسخة الأقدم المخزنة لإنشاء مساحة للنسخة الجديدة.

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

دورة حياة النسخة المخزنة ​

عندما  تُزال نسخة للمكون من الـDOM ولكنها عبارة عن جزء من شجرة مكونات مخزنة بواسطة <KeepAlive>، ستتحول إلى حالة خاملة بدلاً من إزالتها من الـDOM. عندما تُضاف نسخة للمكون إلى الـDOM كجزء من شجرة مكونات مخزنة، ستتحول إلى حالة مفعلة.

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // يستدعى عند الوصل 
  // وكل مرة يتم إدراجه من الذاكرة المؤقتة
})

onDeactivated(() => {
  // يستدعى عند إزالته من الـDOM إلى الذاكرة المؤقتة
  // وكذلك عند إزالته
})
</script>

export default {
  activated() {
    // يستدعى عند الوصل 
    // وكل مرة يتم إدراجه من الذاكرة المؤقتة
  },
  deactivated() {
    // يستدعى عند إزالته من الـDOM إلى الذاكرة المؤقتة
    // وكذلك عند إزالته
  }
}

تجدر الإشارة إلى:

• onActivatedactivated يستدعى أيضًا عند الوصل، وonDeactivateddeactivated عند الفصل.

• تعمل كل من الدوال على جذر المكون المخزن بواسطة <KeepAlive>، ولكنها تعمل أيضًا على المكونات الفرعية في شجرة المكونات المخزنة.

ذات علاقة

• مرجع الواجهة البرمجية لـ<KeepAlive>