Коли викликається destroyed?

VueJunior~1 хв читання

Залежно від версії Vue хук називається по-різному:

Vue 2: beforeDestroy і destroyed
Vue 3: beforeUnmount і unmounted (destroyed у Vue 3 більше не існує)

Тож відповім для Vue 2, як у питанні, і дам еквівалент для Vue 3 - це важливо на співбесіді.

Коли викликається `destroyed` (Vue 2)?

Хук destroyed викликається тоді, коли компонент повністю знищено:

Простіше кажучи:

destroyed викликається після остаточного видалення компонента з DOM і очищення всіх його ресурсів.

beforeDestroy → компонент ще живий, можна очистити слухачі
destroyed → компонент повністю видалений

export default {
  destroyed() {
    console.log("Компонент видалено з DOM");
  }
}

Спрацьовує, наприклад, коли v-if став false:

html

<MyComponent v-if="show" />

show = false; // → destroyed викликається

Це фінальна точка життя компонента.

html

<MyComponent v-show="visible" />

Якщо visible змінився - компонент залишається в DOM, лише приховується. destroyed НЕ буде викликано.

У Vue 3 хуки перейменовано:

Приклад:

import { onUnmounted } from "vue";

onUnmounted(() => {
  console.log("Компонент видалено у Vue 3");
});

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.