زنده نگه داشتن کامپوننت - KeepAlive ​

<KeepAlive> یک کامپوننت داخلی است که وقتی به صورت شرطی بین چند کامپوننت پویا جابجا می‌شویم به ما این امکان را می‌دهد تا نمونه‌های ساخته شده از کامپوننت را ذخیره کنیم.

استفاده پایه ​

در فصل مبانی کامپوننت، ما دستورات مربوط به کامپوننت‌های پویا را با استفاده از عنصر ویژه <component> معرفی کردیم:

<component :is="activeComponent" />

به طور پیش‌فرض، نمونه‌ی فعال کامپوننت پس از جابجا شدن از آن، unmount می‌شود و هر تغییری که در state آن اعمال شده است، از دست می‌رود. وقتی این کامپوننت دوباره نمایش داده می‌شود، یک نمونه‌ی جدید با state اولیه ایجاد می‌شود.

در مثال زیر، دو کامپوننت وجود دارد. کامپوننت A شامل یک شمارنده است، در حالی که کامپوننت B شامل یک پیام همگام‌سازی‌شده با یک input از طریق v-model است. تلاش کنید state یکی از آنها را تغییر دهید، به کامپوننت دیگر بروید و سپس دوباره به قبلی برگردید:

متوجه خواهید شد که وقتی به آن باز می‌گردید، وضعیتی که قبلاً تغییر کرده بود، دوباره بازنشانی می‌شود.

ایجاد نمونه‌ی جدیدی از کامپوننت هنگام جابجایی، به صورت عادی رفتار مفیدی است اما در این مورد، می‌خواهیم که هر دو نمونه‌ی کامپوننت حتی زمانی که غیرفعال هستند حفظ شوند. برای حل این مشکل، می‌توانیم کامپوننت خود را با کامپوننت داخلی <KeepAlive> محاصره کنیم:

<!-- کامپوننت‌های غیرفعال ذخیره خواهند شد -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

حالا، داده ها در جابجایی بین کامپوننت‌ها حفظ خواهد شد:

Include / Exclude ​

به طور پیش‌فرض، <KeepAlive> هر نمونه‌ی کامپوننت را کش می‌کند. می‌توانیم این رفتار را از طریق ویژگی‌های include و exclude تغییر دهیم. هر دو ویژگی می‌توانند یک رشته با ویرگول جداشده، یک RegExp، یا یک آرایه را بپذیرند. به زبان ساده include به Vue.js می‌گوید چه چیزی را در حافظه کش کند، در حالی که exclude مشخص می‌کند چه چیزی را در حافظه نگه ندارد.

<!-- comma-delimited string -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (use `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Array (use `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

تطابق با آپشن name کامپوننت بررسی می‌شود، بنابراین کامپوننت‌هایی که نیاز به کش شرطی توسط KeepAlive دارند، باید یک آپشن name اعلام کنند.

حداکثر تعداد نمونه‌های کش شده ​

ما می‌توانیم حداکثر تعداد نمونه‌های کامپوننت که می‌توانند در حافظه ذخیره شوند را توسط ویژگی max محدود کنیم. وقتی max مشخص شده باشد، <KeepAlive> مانند ذخیره‌سازی LRU عمل می‌کند: اگر تعداد نمونه‌های ذخیره شده بیشتر از تعداد max شود، نمونه‌ای که اخیراً کمترین استفاده از آن شده، نابود می‌شود تا جایگاه برای نمونه جدیدی ایجاد شود.

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

چرخه‌ی حیات نمونه‌های ذخیره‌شده ​

<KeepAlive> به نمونه‌های کامپوننت اجازه می‌دهد که در وضعیت غیرفعال نگه‌داشته شوند وقتی که در بخش قابل مشاهده از برنامه نیستند، و زمانی که نیاز است، دوباره فعال می‌شوند و به بهینه‌سازی عملکرد کمک می‌کند.

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

onActivated(() => {
  // اولیه فراخوانی می‌شود mount در
  // و هر بار که دوباره از کش وارد می‌شود
})

onDeactivated(() => {
  // و رفتن به کش DOM هنگام حذف از 
  // شدن فراخوانی می‌شود unmount و همچنین هنگام
})
</script>

export default {
  activated() {
    // اولیه فراخوانی می‌شود mount در
    // و هر بار که دوباره از کش وارد می‌شود
  },
  deactivated() {
    // و رفتن به کش DOM هنگام حذف از 
    // شدن فراخوانی می‌شود unmount و همچنین هنگام
  }
}

توجه داشته باشید که:

• onActivatedactivated در زمان mount فراخوانی می‌شود و onDeactivateddeactivated در زمان unmount.

• این هوک‌ها برای تمام کامپوننت‌ها، هم در سطح اصلی و هم در سطوح عمیق‌تر، در داخل درخت کامپوننت کش شده فراخوانی می‌شوند.

مرتبط

• مستندات ‎<KeepAlive>‎ API