KeepAlive ​

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

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

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

<component :is="activeComponent" />

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

در مثال زیر، دو کامپوننت وجود دارد. کامپوننت A شامل یک شمارنده است، در حالی که کامپوننت B شامل یک پیام است. تلاش کنید وضعیت یکی از آنها را تغییر دهید، به کامپوننت دیگر بروید و سپس دوباره به قبلی برگردید:

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

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

<!-- Inactive components will be cached! -->
<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(() => {
  // called on initial mount
  // and every time it is re-inserted from the cache
})

onDeactivated(() => {
  // called when removed from the DOM into the cache
  // and also when unmounted
})
</script>

export default {
  activated() {
    // called on initial mount
    // and every time it is re-inserted from the cache
  },
  deactivated() {
    // called when removed from the DOM into the cache
    // and also when unmounted
  }
}

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

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

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

Related

• <KeepAlive> API مرجع