unmounted (unmounted)
هوک «unmounted در ویو (Vue)» بعد حذف کامپوننت اجرا می شود. «هوک (Hook)» یعنی زمان بندی آماده اجرا برای کد. اینجا کامپوننت از DOM بیرون رفته است. بنابراین باید کارهای پایانی را تمام کنیم. مثل وقتی از کلاس بیرون می روی و چراغ را خاموش می کنی.
unmounted در ویو چیست؟
این هوک پس از حذف کامل کامپوننت از DOM اجرا می شود. بنابراین دیگر رفرنسی برای دستکاری نمایش نیست. اما می توانی تایمرها را لغو کنی. همچنین می توانی رویدادها را از بین ببری. این کارها از نشت حافظه جلوگیری می کند.
نمونه کد از منبع
در این مثال، پس از حذف کامپوننت، یک پیام هشدار نشان داده می شود.
<script>
export default {
unmounted() {
alert("The component is removed (unmounted)!");
}
}
<\/script>
گام های عملی
- لیست پاکسازی را آماده کن. تایمر و لیسنرها.
- لغو setInterval و setTimeout را انجام بده.
- رویدادهای global را remove کن. تمیز خارج شو.
- منابع خارجی را ببند. مثل WebSocket یا اشتراک ها.
نکته ها و هشدارها
نکته: پیام هشدار شاید زودتر دیده شود. چون ابتدا حذف می شود، سپس هشدار می آید، و بعد از تأیید، صفحه بدون کامپوننت رندر می شود.
هشدار: در unmounted دیگر به DOM همان کامپوننت تکیه نکن. چون عنصرها حذف شده اند.
ارتباط با دیگر هوک ها
اگر نیاز به کارِ قبلِ حذف داری، از beforeUnmount استفاده کن. برای توضیح خود «unmounted در ویو» همین صفحه مرجع توست. سپس برای مدیریت خطاها می توانی به errorCaptured سر بزنی.
جمع بندی سریع
- unmounted پس از حذف اجرا می شود.
- DOM کامپوننت دیگر در دسترس نیست.
- تایمرها و رویدادها را پاکسازی کن.
- کارهای سنگین انجام نده.
- قبلِ حذف، از beforeUnmount کمک بگیر.