Updated April 3, 2023
Introduction to Vue.js lifecycle
As we all know that Vue.js is a JavaScript framework that is used commonly these days. Vue.js application creates an instance automatically on creating a new Vue project. This Vue instance is automatically created in the main.js file of the project. Vue components/ instances have a lifecycle consisting of all the phases (which is managed by Vue itself). The component goes from initialization, instance creation, mounting, and making data changes on DOM to its destruction. Various functions are called by default in the specific phases of the lifecycle, which are known as lifecycle hooks. In this topic, we are going to learn about Vue.js Lifecycle.
Lifecycle of Vue.js
As already mentioned above, in the Vue.js lifecycle, the component/ instance goes through various phases and the default function that running in those phases of the life cycle for the specific purpose. Basically, there are 8 lifecycle hooks which the instance goes through in Vue.js, in which 4 of them start with the word ‘before’, indicating that they are the events triggered before it actually happens. So, let us understand each lifecycle hook of the Vue lifecycle in detail:
1. beforeCreate
Creation of instance is the first task before performing any action in the DOM.’Creating’ hooks are the first hooks that are created at the server-side before the addition of component and its modification on the DOM. The creation of hooks is used if the set-up needs to be done at both the server and client-side. As the name indicates, this is the first and foremost lifecycle hook which is called just after the initialization of the Vue instance. In order to access this phase, ‘beforeCreated’ is used. At this stage, properties like data setup, watchers, etc., are not initialized, and hence the code we want to execute before the initialization of the object can be inserted here by the programmer.
2. created
This is the second phase of the Vue lifecycle and is called after the beforeCreate phase. In order to access this phase and insert the code in between, the ‘created’ hook needs to be used. In this stage, the important things like data properties, watchers, events, etc., have been activated with default characteristics. Therefore, we can access the activated events (activated while creation of hooks) in this phase.
3. beforeMount
As we know that mounting hooks are used when we want to access the components before and after the first render. These hooks are one of the most commonly used hooks. These hooks are called on the client-side and are used to modify or access the DOM of the component. This hook is called just after the created hook, i.e. once the instance is created, mounting of it on DOM needs to be done. In this stage of the instance lifecycle, the template is compiled (It first checks whether the template is available, if not, then considers outer HTML as its template). Element property is not available at this stage, so manipulation of DOM cannot be performed. This is the stage just before the mounting of instances on DOM.
4. Mounted
This hook is called just after the ‘beforeMount’ hook. As the DOM template has been compiled in the above phase, the data is fitted into the template. Here all the application/ project components are available to use irrespective of the ones in the ‘beforeMount’ hook. Element property is available to be used here. The el elements at this stage get replaced by vm.$el. As the components are available to be used in this phase, all the DOM elements also get replaced with data-filled elements. Use a ‘mounted’ hook in order to insert the code and modify the elements of the DOM.
5. beforeUpdate
Updating hooks are called when anything makes the component to re-render. beforeUpdate is called after the Mounted hook in the Vue instance lifecycle. It is called before the final patching of DOM in order to rectify/ modify the changes made to the data. DOM can be accessed at this stage, and desired changes like adding, updating, removing of listeners can be done here before the final patch.
6. Updated
The updated hook is called after all the desired changes have been made to the DOM, and it re-renders, i.e. after the beforeUpdate phase of the Vue lifecycle. It is called on the client-side. As the DOM has been updated, all the DOM related operations can be performed here. Though the DOM specific operations are allowed, the programmers need to be careful about this, and generally, state changes operations are not preferred here.
7. beforeDestroy
In order to do the resource and memory management after the desired task is performed, one needs to destroy the instance. The Vue lifecycle is done in the beforeDestroy phase, and it is called before the instance destruction. Though it allows the component to be functional and instance functionalities intact. This hook is also called at the client-side rendering, and the desired cleanups regarding the component data are done here.
8. Destroyed
This is the final stage of the Vue instance lifecycle. It is called in order to destroy the child components and leftovers. At this time, all the event listeners and instance related things have been removed from the memory. It is used to indicate the server regarding the component and its attachment destruction.
In all the above 8 lifecycle phases of the Vue instance, programmers can also add our logic/ code by accessing those particular hooks of the instance to perform the desired task or control the flow. But to insert that code, one needs to have the in-depth knowledge of each hook of how to access them and their specific tasks.
Conclusion
The above description clearly explains all the lifecycle hooks of the Vue.js framework. There are some instance variables in every framework, components created, which are automatically created and destroyed once the desired task is performed. So before starting to work on any framework, it is very important to understand the whole lifecycle of it in order to have in-depth knowledge of it and work accordingly.
Recommended Articles
This is a guide to the Vue.js lifecycle. Here we discuss the Vue.js lifecycle; the component/ instance goes through various phases and the default function. You may also have a look at the following articles to learn more –
