The life cycle hook of Vue components allows you to run code at different stages from creation to destruction of components. The main hooks include created, mounted, updated and unmounted. 1.created is triggered after the component instance is created, used to obtain the initial data or set the status; 2.mounted is called after the component is inserted into the DOM, suitable for accessing or operating the DOM elements; 3.updated is executed after the component is re-rendered due to data changes, and can be used to respond to DOM updates; 4.unmounted is run when the component is removed, used to clean up resources such as timers or event listeners. The correct selection of hooks depends on the target stage, whether DOM access is required, and how often the logic should be executed. Mastering these hooks can help you better control component behavior and optimize performance.

Sure! Vue's component lifecycle hooks let you run code at specific stages of a component's life — from creation to destruction. Knowing when each hook runs helps you organize your logic properly, like fetching data at the right time or cleaning up resources before a component disappears.

Here's a breakdown of the main lifecycle hooks and what they're typically used for:

created : When the component is created

This hook runs after the component instance has been created but before the template is rendered or the DOM is mounted. At this point, data and methods are available, but you can't access the actual HTML elements yet.

Use cases:

• Fetching initial data from an API
• Setting up initial state based on props
• Performing setup logic that doesn't require DOM access

Example:

 created() {
  console.log('Component created');
  this.fetchData();
}

This is a good place to start loading async data because it gives you a head start before the user sees anything.

mounted : When the component is added to the DOM

Once the component is inserted into the DOM, the mounted hook fires. Now you have full access to the DOM elements related to the component.

Use cases:

• Accessing or manipulating DOM elements directly (eg, initializing a third-party library)
• Starting animations
• Making final adjustments after rendering

Example:

 mounted() {
  console.log('Component mounted');
  this.$refs.input.focus(); // automatically focus on an input field
}

This is one of the most commonly used hooks, especially when working with external libraries or needing to interact with rendered elements.

updated : When the component re-renders

This hook runs every time the component updates — that is, whenever reactive data changes and causes the DOM to re-render.

Use cases:

• Reacting to changes in the DOM after an update
• Syncing with external state that depends on Vue data

Example:

 updated() {
  console.log('Component updated');
  this.adjustLayout();
}

?? Caution : Avoid modifying reactive data inside updated , as it could cause an infinite loop.

unmounted : When the component is removed

This hook runs after the component has been removed from the DOM. It's your last chance to clean up things like event listeners, timesrs, or subscriptions.

Use cases:

• Cleaning up manually attached event listeners
• Cancelling times or intervals
• Releasing resources to prevent memory leaks

Example:

 data() {
  return {
    intervalId: null
  };
},
mounted() {
  this.intervalId = setInterval(this.pollData, 5000);
},
unmounted() {
  clearInterval(this.intervalId);
}

It's easy to forget about cleanup, but doing so here avoids potential bugs or performance issues.

Vue also has other hooks like beforeMount , beforeUpdate , beforeUnmount , and in Vue 3, onActivated and onDeactivated for components wrapped in <keep-alive></keep-alive> . But the four mentioned above ( created , mounted , updated , unmounted ) are the ones you'll use most often.

Knowing which hook to use comes down to:

• What stage of the component lifecycle you need to target
• Whether you need DOM access
• Whether your logic should run once or every time the component updates

And just like that, you've got control over your component's entire journey.

The above is the detailed content of Can you explain the component lifecycle hooks in Vue (e.g., created, mounted, updated, unmounted) and their typical use cases?. For more information, please follow other related articles on the PHP Chinese website!