What are lifecycle hooks in Vue and when are they used?

HighIntermediateVue

By FrontendAtlas Team · Updated Jan 30, 2026

Quick Answer

This question is about lifecycle timing and side-effect placement in Vue components. Focus on which hooks run before/after mount, update, and unmount, plus what logic is safe in each stage. Keep Composition API fundamentals (setup/ref/reactive design) in the dedicated Composition API question.

Answer

Overview

Every Vue component goes through a series of lifecycle stages — creation, mounting, updating, and unmounting. Vue provides lifecycle hooks, which are special functions you can define to run code automatically at these stages.

Scope guard

If the interviewer asks "Why did Vue introduce setup(), ref(), and reactive()?", switch to <a href="/vue/trivia/vue-composition-api">What are Vue Composition APIs (setup(), ref, reactive) and why were they introduced?</a>.

This page is narrower: when hooks fire and where side effects belong.

JAVASCRIPT

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  created() {
    console.log('Component is created!');
  },
  mounted() {
    console.log('Component is mounted to the DOM!');
  },
  updated() {
    console.log('Component has re-rendered!');
  },
  unmounted() {
    console.log('Component has been removed from the DOM!');
  }
};

Each hook corresponds to a specific stage of the component lifecycle. For example, created() runs when the component is initialized, while mounted() runs when the component is added to the DOM.

Commonly Used Lifecycle Hooks

Hook	When It Runs	Typical Use Case
beforeCreate	Before data observation and events are set up	Rarely used; low-level hook for advanced debugging
created	After instance is created and reactive data is available	Initialize data or fetch initial data
beforeMount	Before component is mounted to the DOM	Prepare final changes before mounting
mounted	After the component is mounted to the DOM	Access the DOM or third-party libraries
beforeUpdate	Before reactive data causes re-rendering	Perform checks before DOM updates
updated	After DOM updates due to reactive data changes	React to DOM changes or perform animations
beforeUnmount	Before the component is destroyed	Cleanup operations or cancel timers
unmounted	After the component is destroyed and removed from DOM	Release resources, event listeners, or observers

Vue Lifecycle Hook Sequence

Lifecycle Hook Flow
1️⃣ beforeCreate → 2️⃣ created → 3️⃣ beforeMount → 4️⃣ mounted
Then for updates: 5️⃣ beforeUpdate → 6️⃣ updated<br>And finally for teardown: 7️⃣ beforeUnmount → 8️⃣ unmounted.

Use Case Example
Fetching data when a component mounts is one of the most common lifecycle hook patterns:

JAVASCRIPT

export default {
  data() {
    return { users: [] };
  },
  async mounted() {
    const res = await fetch('https://api.example.com/users');
    this.users = await res.json();
  }
};

In this example, the mounted() hook ensures the component is attached to the DOM before fetching and displaying data.

Think of lifecycle hooks as checkpoints — moments in a component’s journey where you can pause, inspect, or intervene to perform logic, cleanup, or side effects.

Summary

Summary

Lifecycle hooks are timing checkpoints across create, mount, update, and teardown.
Use them to place side effects safely: setup/init, DOM work, and cleanup at the right stage.
The strongest interview signal is explaining why a task belongs in one hook and not another.