When is destroyed called?

VueJunior~1 min read

Depending on the Vue version, the hook has a different name:

Vue 2: beforeDestroy and destroyed
Vue 3: beforeUnmount and unmounted (destroyed no longer exists in Vue 3)

So I'll answer for Vue 2, as asked, and give the Vue 3 equivalent, which matters in an interview.

When is `destroyed` called (Vue 2)?

The destroyed hook fires when the component has been completely destroyed:

In simple terms:

destroyed fires after the component has been finally removed from the DOM and all its resources cleaned up.

beforeDestroy → the component is still alive, you can clean up listeners
destroyed → the component has been fully removed

export default {
  destroyed() {
    console.log("Component removed from the DOM");
  }
}

This fires, for example, when v-if becomes false:

html

<MyComponent v-if="show" />

show = false; // → destroyed is called

This is the final point of the component's life.

html

<MyComponent v-show="visible" />

If visible changes, the component stays in the DOM, it is only hidden. destroyed will NOT be called.

In Vue 3, the hooks were renamed:

Example:

import { onUnmounted } from "vue";

onUnmounted(() => {
  console.log("Component removed in Vue 3");
});

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.