Components Lifecycle

Published on Sep 12, 2022

Components are the building blocks of Vue.js applications. They are reusable, self-contained, and can be nested inside other components. They can be used in templates using the <component-name> syntax.

Component Lifecycle

Each component has a lifecycle which you can monitor and interact with. The following diagram shows the lifecycle of a component:

There are 8 lifecycle hooks:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmount
  • unmounted
  • errorCaptured
  • renderTracked
  • renderTriggered

Each of these hooks are called with the this context pointing to the Vue instance.

beforeCreate

The beforeCreate hook is called synchronously immediately after a component instance is created. At this stage, the instance has finished initializing props, data, computed, methods, and watches but has not started mounting the component.

It is not safe to access the component instance or the component's data or computed properties at this stage because they have not been initialized.

created

The created hook is called synchronously after a component instance is created. At this stage, the instance has finished initializing props, data, computed, methods, and watches. The component has not been mounted yet.

It is safe to access the component instance and the component's data and computed properties at this stage.

beforeMount

The beforeMount hook is called synchronously before the component is mounted. At this stage, the component's render function has been called for the first time.

It is not safe to access the component instance or the component's data or computed properties at this stage because they have not been initialized.

mounted

The mounted hook is called synchronously after the component is mounted. At this stage, the component's render function has been called for the first time and the component has been mounted to the DOM.

It is safe to access the component instance and the component's data and computed properties at this stage.

beforeUpdate

The beforeUpdate hook is called synchronously before the component's data or computed properties are updated. At this stage, the component's render function has been called for the first time.

It is not safe to access the component instance or the component's data or computed properties at this stage because they have not been updated.

updated

The updated hook is called synchronously after the component's data or computed properties are updated. At this stage, the component's render function has been called for the first time and the component has been updated.

It is safe to access the component instance and the component's data and computed properties at this stage.

beforeUnmount/h3>

The beforeUnmount hook is called synchronously before the component is unmounted. At this stage, the component's render function has been called for the first time.

It is not safe to access the component instance or the component's data or computed properties at this stage because they have not been updated.

unmounted

The unmounted hook is called synchronously after the component is unmounted. At this stage, the component's render function has been called for the first time and the component has been unmounted.

It is not safe to access the component instance or the component's data or computed properties at this stage because they have not been updated.

errorCaptured

The errorCaptured hook is called when an error from a descendant component is captured. The hook receives three arguments: the error, the component instance that triggered the error, and a string containing information on where the error was captured. The hook can return false to stop the error from propagating further.

renderTracked

The renderTracked hook is called when a reactive property is accessed during rendering. The hook receives two arguments: the event object and the tracked property. The hook can return false to prevent the property from being tracked.

renderTriggered

The renderTriggered hook is called when a reactive property is accessed during rendering. The hook receives two arguments: the event object and the triggered property. The hook can return false to prevent the property from being tracked.