Vue.js Lifecycle Hooks
Vue components go through a series of steps from creation to destruction. These steps are called lifecycle hooks. They allow you to run custom code at specific stages of a component’s existence.
Main Lifecycle Hooks
created()– runs after the component is created, before DOM is mounted.mounted()– runs when the component is inserted into the DOM.updated()– runs when reactive data changes and the DOM is re-rendered.unmounted()– runs just before the component is removed from the DOM.
Example: Lifecycle Logs
This example shows how hooks fire in order. Open your browser console to see the logs.
When to Use Lifecycle Hooks?
- created() → fetch initial data before rendering
- mounted() → work with DOM elements, 3rd-party libraries
- updated() → respond to reactive data changes
- unmounted() → clean up (timers, event listeners)
Summary
Lifecycle hooks give you fine-grained control over component behavior. Use them wisely to manage data fetching, DOM interactions, and cleanup.
