All Vue components go through the Lifecycle Hooks phases. These phases are different initialization steps. Not just the subcomponents but the main root component go through these stages. It is worth to note the purposes of these phases are different. Furthermore, Options API and Composition API lifecycle hooks differ a bit. In a previous VueJS post, I already went through the details of the Options API lifecycle hooks, so in this one, I am going to focus on the lifecycle hooks of the Composition API. The lifecycle hooks of the Composition API are also functions, like the Options API ones. And their purpose is the same.

When we use Composition API, the name of the lifecycle hooks starts with an on prefix. Based on this, let's see which are these.

on Mounted Lifecycle Hook

The callback will run after the component has been mounted. One component is mounted when:

• all of its synchronous child components have been mounted
  • it does not include the async components
• The component's DOM tree has been created and inserted into the parent container.

on Updated Lifecycle Hook

The callback will run after the component has updated its DOM tree due to a reactive state change. If we need to access the updated DOM after a specific change, we should use the nextTick function instead.

on Unmounted

The callback will run after the component has been unmounted. We are talking about an unmounted component when all of its child components have been unmounted. Render effect and computed / watchers executions are not running.

on BeforeMount Lifecycle Hook

It will run, right before the component is to be mounted. 

• The component has finished setting up its reactive state. 
• No DOM nodes have been created yet. 
• It is about to execute its DOM render effect for the first time.

on BeforeUpdate

The hook will run right before the component is about to update its DOM tree due to a reactive state change. 

• In this hook, we can safely modify the component state. 
• We can change the DOM too before Vue do it. 

on BeforeUnmount Lifecycle Hook

• It runs right before a component instance is to be unmounted.

on ErrorCaptured

• We can capture errors from descendent components from these sources:
  • Component renders
  • Event handlers
  • Lifecycle hooks
  • setup() function
  • Watchers
  • Custom directive hooks
  • Transition hooks

This hook receives three arguments:

• the error 
• the component instance that triggered the error, 
• the information string specifying the error source type.

Error Propagation Rules

• 1, If the application-level (app.config.errorHandler) error handling is defined we will get errors reports.
• 2, Multiple errorCaptured:
  • If this hook exits on a component's inheritance chain or parent chain then all of them will be invoked on the same error.
• 3, ErrorCaptured hook throws the error
  • then this and the original error too are sent to the (app.config.errorHandler)
• 4, ErrorCaptured hook returns false to prevent error propagation further.
  • This is essentially saying "this error has been handled and should be ignored." It will prevent any additional errorCaptured hooks or app.config.errorHandler from being invoked for this error.

on Activated Lifecycle Hook

• It runs when the component instance is inserted into the DOM as part of a tree cached by .

on Deactivated

• It runs when the component instance is removed from the DOM as part of a tree cached by .

Conclusion

As I mentioned at the beginning of the post the Lifecycle Hooks are just a bit different in the Composition API context than in the Options one. You can check the details of the Options API lifecycle hooks in my previous post here. Anyway, the main difference is the name of the functions and not all methods are available on the Composition API version. Otherwise, the purpose and why we need to use it are the same.