Suggest an editImprove this articleRefine the answer for “What are the main stages of a component's lifecycle?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The main stages of a Vue component's lifecycle are **four key phases**: Creation, Mounting, Updating, and Unmounting. **Key point:** each phase has its own lifecycle hooks, and this is a classic interview question.Shown above the full answer for quick recall.Answer (EN)ImageThe main stages of a Vue component's lifecycle are **four key phases** that every component goes through: 1. **Creation** 2. **Mounting** 3. **Updating** 4. **Unmounting** Each phase has its own lifecycle hooks. Let's break it down in detail - this is a classic interview question. --- ## 1. The **Creation** phase The component is created, reactivity starts up, but the **DOM is not yet available**. Hooks: #### `beforeCreate` - Reactive data is not yet initialized - You cannot access `data`, `props`, `computed` #### `created` - Reactivity is already working - `data`, `methods`, `props`, `computed`, watch are available - There is no DOM yet Used for: - API requests - preparing data - setting up timers --- ## 2. The **Mounting** phase The component builds the virtual DOM and **is inserted into the real DOM**. Hooks: #### `beforeMount` - The DOM has not been updated by Vue yet - The initial markup is on the page #### `mounted` - The component is fully in the DOM - You can use `refs` - You can integrate third-party libraries Used for: - initializing charts - focusing an input - working with canvas - connecting third-party scripts --- ## 3. The **Updating** phase Runs every time reactive data changes. Hooks: #### `beforeUpdate` - The DOM is still old - The data has already changed #### `updated` - The DOM is updated - You can react to the fact that the UI changed Important: do not change `data` inside `updated`, or you'll get an infinite loop. --- ## 4. The **Unmounting** phase The component is removed from the DOM. Hooks: #### `beforeUnmount` - The component is still in the DOM - Time to clean up resources #### `unmounted` - The component no longer exists - The DOM elements are destroyed Used for: - clearing timers (`setInterval`, `setTimeout`) - unsubscribing from events (`window.addEventListener`) - closing a WebSocket - removing third-party library listenersFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.