فهرست سرفصل‌های Vue
خانه (HOME) معرفی (Intro) دایرکتیوها (Directives) v-bind (v-bind) v-if (v-if) v-show (v-show) v-for (v-for) رویدادها (Events) v-on (v-on) متدها (Methods) تغییردهنده های رویداد (Event Modifiers) فرم ها (Forms) v-model (v-model) بایندینگ CSS (CSS Binding) ویژگی های محاسبه شده (Computed Properties) واچرها (Watchers) قالب ها (Templates) چرا، چگونه و راه اندازی (Why, How and Setup) اولین صفحه SFC (First SFC Page) کامپوننت ها (Components) پراپس (Props) کامپوننت های v-for (v-for Components) $emit() ($emit()) ویژگی های عبوری (Fallthrough) (Fallthrough Attributes) استایل Scoped (Scoped Styling) کامپوننت های محلی (Local Components) اسلات ها (Slots) v-slot (v-slot) اسلات های Scoped (Scoped Slots) کامپوننت های پویا (Dynamic Components) Teleport (Teleport) درخواست HTTP (HTTP Request) رفرنس های تمپلیت (Template Refs) هوک های چرخه عمر (Lifecycle Hooks) Provide/Inject (Provide/Inject) مسیریابی (Routing) ورودی های فرم (Form Inputs) انیمیشن ها (Animations) انیمیشن با v-for (Animations with v-for) بیلد (Build) Composition API (Composition API) ویژگی های توکار (Built-in Attributes) ویژگی 'is' ('is' Attribute) ویژگی 'key' ('key' Attribute) ویژگی 'ref' ('ref' Attribute) کامپوننت های توکار (Built-in Components) <KeepAlive> (<KeepAlive>) <Teleport> (<Teleport>) <Transition> (<Transition>) <TransitionGroup> (<TransitionGroup>) المان های توکار (Built-in Elements) <component> (<component>) <slot> (<slot>) <template> (<template>) نمونه کامپوننت (Component Instance) $attrs ($attrs) $data ($data) $el ($el) $parent ($parent) $props ($props) $refs ($refs) $root ($root) $slots ($slots) $emit() ($emit()) $forceUpdate() ($forceUpdate()) $nextTick() ($nextTick()) $watch() ($watch()) دایرکتیوها (Directives) v-bind (v-bind) v-cloak (v-cloak) v-for (v-for) v-html (v-html) v-if (v-if) v-else-if (v-else-if) v-else (v-else) v-memo (v-memo) v-model (v-model) v-on (v-on) v-once (v-once) v-pre (v-pre) v-show (v-show) v-slot (v-slot) v-text (v-text) گزینه های نمونه (Instance Options) داده ها (data) متدها (methods) محاسبه شده ها (computed) watch (watch) پراپس (props) emits (emits) expose (expose) هوک های چرخه عمر (Lifecycle Hooks) beforeCreate (beforeCreate) created (created) beforeMount (beforeMount) mounted (mounted) beforeUpdate (beforeUpdate) updated (updated) beforeUnmount (beforeUnmount) unmounted (unmounted) errorCaptured (errorCaptured) renderTracked (renderTracked) renderTriggered (renderTriggered) activated (activated) deactivated (deactivated) serverPrefetch (serverPrefetch) مثال ها (Examples) تمرین ها (Exercises) کوییز (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Vue

Vue — beforeUnmount (beforeUnmount)

آخرین بروزرسانی: 1404/08/21

beforeUnmount (beforeUnmount)

«beforeUnmount در ویو» یک «هوک (Hook)» است. هوک یعنی نقطه زمانیِ آماده برای کد. این هوک درست قبلِ حذف کامپوننت از DOM اجرا می شود. هنوز همه چیز کار می کند. پس می توانیم داده بخوانیم یا رویدادها را آزاد کنیم. مثل وقتی زنگ تفریح تمام می شود و تو کیف را جمع می کنی.

beforeUnmount در ویو چیست؟

این هوک پیش از حذف کامپوننت اجرا می شود. کامپوننت هنوز زنده است. refs و state فعال هستند. بنابراین می توانی آخرین کارها را انجام دهی. مثلاً پاکسازی تایمر یا خواندن متن یک عنصر.

نمونه کد from منبع

در این مثال، متن داخل تگ <p> را قبل از حذف می خوانیم و هشدار می دهیم.

<script>
export default {
  beforeUnmount() {
    alert("beforeUnmount: The text inside the p-tag is: " + this.$refs.pEl.innerHTML);
  }
}
<\/script>

مشاهده در ادیتور

گام های عملی سریع

  1. هدف پاکسازی را مشخص کن. مثل بستن تایمرها.
  2. کدت را در beforeUnmount قرار بده. کوتاه و واضح.
  3. اگر از refs استفاده می کنی، همین جا بخوان.
  4. در پایان، حافظه را آزاد کن. نشت ایجاد نشود.

نکته های مهم

نکته: در beforeUnmount هنوز به this و $refs دسترسی داری. پس خواندن داده امن است.

نکته: پاکسازی «Event Listener» را همین جا انجام بده. از removeEventListener استفاده کن.

هشدار: عملیات سنگین اجرا نکن. چون کاربر منتظر خروج نرم است.

ارتباط با دیگر هوک ها

برای شروع کار از mounted کمک بگیر. برای پس از حذف کامل، سراغ unmounted برو. این پیوستگی، چرخه عمر را کامل می کند.

جمع بندی سریع

  • beforeUnmount پیش از حذف اجرا می شود.
  • this و $refs هنوز در دسترس هستند.
  • پاکسازی تایمر و لیسنرها را انجام بده.
  • کارهای سنگین انجام نده.
  • پس از حذف کامل، unmounted اجرا می شود.