Life cycle of components in Vue


Let’s keep on learning Vue 3, and today’s post is about the life cycle of components, something esential that you must know and that can make many things easier.

Basically, the life cycle is everything that happens from the moment the component is born until its complete destruction. In this cycle it is possible the development and execution of multiple events that will allow us to realize much more and much better for the development of our applications.

All instances of each component include a series of necessary steps, such as starting data, rendering the template, mounting the instance in the DOM or updating the DOM when its state changes.

The life cycle of a component

My main recommendation is that you read the official documentation, but here I will tell you roughly what you should know. These actions are also known as hooks.

Vue is characterized by the fact that in the life of a component a series of events are carried out that allow to control everything perfectly. It is best to show the following diagram:

Life cycle of components in Vue
Ciclo de vida de un componente en Vue 3

When a component is created, even before its creation, it is possible to execute code (beforeCreated), as well as once created (created). The component can be created, but not yet mounted, and events are also triggered before and after (beforeMount and mounted).

During the component’s activity, events are also triggered before updating and just after updating (beforeUpdate and updated). And finally, when the component’s life is over, events are triggered before and after unmounting: beforeUnmount and unmounted.

The life cycle of components in Vue 2

Although I am focused on Vue 3, what is indicated here is also included in Vue 2, and the component lifecycle events are the same, facilitating compatibility between versions. The tasks are also exactly the same.

A llitle bit more about hooks

The main reason for including hooks inside components has several purposes. Thus, creation events are ideal for assigning default values, or retrieving external values (such as, for example, from localStorage). For asynchronous data or AJAX requests, the ideal is to do it after creation, in created.

The component mounted is the time period in which the component is added to the DOM. mounted is the event you should use once the component is added to the DOM (beforeMounted is rarely used!) and can also be used to initialize external libraries, or to execute asynchronous calls.

The update events are those that take place when the component or some of its parts need to be rendered again. Normally, this happens when some value of the component is updated. Personally, I have almost never used them, and I have used more the computed properties than this type of events..

Finally, when components are no longer needed, they are destroyed (life cycle end) causing two new events to occur: one just before destroying and the other once it is removed from the DOM. This is a good time to remove the listener events (removeEventListener) or timers (clearInterval), or the destruction of localStorage data.

The hooks I use the most

Believe me that these events are quite practical, some of them, and sooner or later you will end up including them in your components. The ones I use the most are created, mounted and beforeDestroy because of what I have already mentioned: because they allow me to retrieve asynchronous information before starting to work (be careful, if you use async await you must include these keywords!!), to retrieve information from Vuex, or to delete events or timers.

And, that’s all for today! Happy coding!!!!