Vue js Lifecycle Hooks

What Are Lifecycle Hooks in Vue?

In Vue, each component undergoes a specific sequence from creation to destruction. During this journey, Vue offers special functions—called lifecycle hooks—that let developers insert custom logic at various points of this journey.

These hooks empower you to track initialization, rendering, updates, and cleanup within your components—offering fine-grained control over behavior.

Different Phases & Corresponding Hooks

The lifecycle of a Vue component can be broken down into four distinct stages:

• Setup Begins
• DOM Is Ready
• State Changes
• Component Is Removed

Each phase has specific hooks, which we’ll explain below—each one with totally distinct descriptions.

1. Before Setup Logic: beforeCreate()

• This function executes right before any data is attached.
• Neither props nor reactive properties are available.
• Useful for early logging or very low-level config.

beforeCreate() {   
       console.log("Setup not initialized yet."); 
}

2️. Initialization Complete: created()

• Data properties and methods now exist.
• The UI isn't visible yet.
• Use this to fetch external data or initialize values.

created() {   
     console.log("Component data is now accessible."); 
}

3️. Before DOM Render: beforeMount()

• Happens just before the component’s HTML is placed into the document.
• DOM nodes are not yet interactive.
• Ideal for last-second data tweaks.

beforeMount() {   
      console.log("DOM rendering is about to happen."); 
}

4️. Element Displayed: mounted()

• Component is fully attached to the page.
• DOM operations are safe to perform here.
• Often used for initializing libraries or event listeners.

mounted() {   
       console.log("Visible on screen now.");
 }

5️. Pre-Update Phase: beforeUpdate()

• Triggered when data changes but before the visual output adjusts.
• Offers a chance to inspect old values.

beforeUpdate() {   
      console.log("Data changed; DOM still reflects old state."); 
}

6️. Post-Update Phase: updated()

• Fires after the display has been refreshed.
• Ideal for actions that depend on the DOM being current.

updated() {   
        console.log("UI updated based on new state."); 
}

7️. Before Teardown: beforeUnmount() (Vue 3)

• Called before a component is removed from the DOM.
• Cleanup can begin, like removing timers or listeners.

beforeUnmount() {   
       console.log("Component is about to be removed."); 
}

8️. After Removal: unmounted() (Vue 3)

• Confirms that the component has been taken out.
• Use it to complete destruction processes or analytics.

unmounted() {   
        console.log("Component cleanup finished."); 
}

Summary Chart

Real-World Use Cases

• created() → Fetching initial data from a backend API.
• mounted() → Initializing a charting library once the DOM is ready.
• beforeUnmount() → Clearing intervals or cancelling pending requests.