زنده نگه داشتن کامپوننت - KeepAlive
<KeepAlive>
یک کامپوننت داخلی است که وقتی به صورت شرطی بین چند کامپوننت پویا جابجا میشویم به ما این امکان را میدهد تا نمونههای ساخته شده از کامپوننت را ذخیره کنیم.
استفاده پایه
در فصل مبانی کامپوننت، ما دستورات مربوط به کامپوننتهای پویا را با استفاده از عنصر ویژه <component>
معرفی کردیم:
template
<component :is="activeComponent" />
به طور پیشفرض، نمونهی فعال کامپوننت پس از جابجا شدن از آن، unmount میشود و هر تغییری که در state آن اعمال شده است، از دست میرود. وقتی این کامپوننت دوباره نمایش داده میشود، یک نمونهی جدید با state اولیه ایجاد میشود.
در مثال زیر، دو کامپوننت وجود دارد. کامپوننت A شامل یک شمارنده است، در حالی که کامپوننت B شامل یک پیام همگامسازیشده با یک input از طریق v-model
است. تلاش کنید state یکی از آنها را تغییر دهید، به کامپوننت دیگر بروید و سپس دوباره به قبلی برگردید:
کامپوننت فعلی: A
Count: 0متوجه خواهید شد که وقتی به آن باز میگردید، وضعیتی که قبلاً تغییر کرده بود، دوباره بازنشانی میشود.
ایجاد نمونهی جدیدی از کامپوننت هنگام جابجایی، به صورت عادی رفتار مفیدی است اما در این مورد، میخواهیم که هر دو نمونهی کامپوننت حتی زمانی که غیرفعال هستند حفظ شوند. برای حل این مشکل، میتوانیم کامپوننت خود را با کامپوننت داخلی <KeepAlive>
محاصره کنیم:
template
<!-- کامپوننتهای غیرفعال ذخیره خواهند شد -->
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>
حالا، داده ها در جابجایی بین کامپوننتها حفظ خواهد شد:
کامپوننت فعلی: A
Count: 0نکته
در تمپلیت های DOM باید از <keep-alive>
استفاده شود.
Include / Exclude
به طور پیشفرض، <KeepAlive>
هر نمونهی کامپوننت را کش میکند. میتوانیم این رفتار را از طریق ویژگیهای include
و exclude
تغییر دهیم. هر دو ویژگی میتوانند یک رشته با ویرگول جداشده، یک RegExp
، یا یک آرایه را بپذیرند. به زبان ساده include
به Vue.js میگوید چه چیزی را در حافظه کش کند، در حالی که exclude
مشخص میکند چه چیزی را در حافظه نگه ندارد.
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>
تطابق با آپشن name
کامپوننت بررسی میشود، بنابراین کامپوننتهایی که نیاز به کش شرطی توسط KeepAlive
دارند، باید یک آپشن name
اعلام کنند.
نکته
از نسخهی 3.2.34 به بعد، یک کامپوننت تک فایلی که از <script setup>
استفاده میکند، به طور خودکار آپشن 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(() => {
// اولیه فراخوانی میشود mount در
// و هر بار که دوباره از کش وارد میشود
})
onDeactivated(() => {
// و رفتن به کش DOM هنگام حذف از
// شدن فراخوانی میشود unmount و همچنین هنگام
})
</script>
توجه داشته باشید که:
onActivated
در زمان mount فراخوانی میشود وonDeactivated
در زمان unmount.این هوکها برای تمام کامپوننتها، هم در سطح اصلی و هم در سطوح عمیقتر، در داخل درخت کامپوننت کش شده فراخوانی میشوند.
مرتبط