What are the main stages of a component's lifecycle?

The 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 listeners