Skip to content

KeepAlive

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

استفاده پایه

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

template
<component :is="activeComponent" />

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

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

Current component: A

count: 0

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

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

template
<!-- Inactive components will be cached! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

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

Current component: A

count: 0

نکته

در تمپلیت های DOM باید از <keep-alive> استفاده شود.

Include / Exclude

By default, <KeepAlive> will cache any component instance inside. We can customize this behavior via the include and exclude props. Both props can be a comma-delimited string, a RegExp, or an array containing either types:

template
<!-- 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>

The match is checked against the component's name option, so components that need to be conditionally cached by KeepAlive must explicitly declare a name option.

TIP

Since version 3.2.34, a single-file component using <script setup> will automatically infer its name option based on the filename, removing the need to manually declare the name.

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

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

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

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

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

یک کامپوننت کش شده می‌تواند برای این دو وضعیت از طریق onActivated() و onDeactivated() هوک‌های چرخه حیات را ثبت کند:

vue
<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>

یک کامپوننت کش شده می‌تواند هوک‌های چرخه حیات activated و deactivated را برای این دو وضعیت ثبت کند:

js
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 has loaded