Suggest an editImprove this articleRefine the answer for “When is destroyed called?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Depending on the Vue version, the hook has a different name: in **Vue 2** it is `beforeDestroy` and `destroyed`, in **Vue 3** it is `beforeUnmount` and `unmounted` (`destroyed` no longer exists in Vue 3). The `destroyed` hook fires after the component has been fully removed from the DOM and all its resources have been cleaned up. **Key point:** `destroyed` (Vue 2) / `unmounted` (Vue 3) is not called with `v-show`, since the component stays in the DOM and is only hidden.Shown above the full answer for quick recall.Answer (EN)ImageDepending 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**: - removed from the DOM - its reactivity removed - its place in the component tree severed - its watchers removed - the component no longer exists In simple terms: > `destroyed` **fires after the component has been finally removed from the DOM and all its resources cleaned up.** --- ## The typical Vue 2 lifecycle on destruction ``` beforeDestroy → the component is still alive, you can clean up listeners destroyed → the component has been fully removed ``` --- ## Example (Vue 2): ```js export default { destroyed() { console.log("Component removed from the DOM"); } } ``` This fires, for example, when `v-if` becomes `false`: ```html <MyComponent v-if="show" /> ``` ```js show = false; // → destroyed is called ``` --- ## What can you do in `destroyed`? - clear timers (`clearInterval`, `clearTimeout`) - unsubscribe from events (`removeEventListener`) - close connections (WebSocket) - stop third-party libraries - cancel subscriptions to external APIs **This is the final point of the component's life.** --- ## Important: destroyed is NOT called with v-show ```html <MyComponent v-show="visible" /> ``` If `visible` changes, the component stays in the DOM, it is only hidden. `destroyed` will NOT be called. --- ## The Vue 3 equivalent In Vue 3, the hooks were renamed: - `beforeDestroy` → `beforeUnmount` - `destroyed` → `unmounted` Example: ```js import { onUnmounted } from "vue"; onUnmounted(() => { console.log("Component removed in Vue 3"); }); ```For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.