4 Main Categories of Vuejs Lifecycle

Definition
Vuejs is an open source JavaScript framework used to build user-interfaces. It can also function as a web app framework that is capable of handling advanced single-page apps.

VUEJS Lifecycle
If you want to go deep in Vue, firstly you should be familiar with the component lifecycle.

Life-cycle methods serve as an imagination as to how our built components work behind the scenes. They provide you with methods that enable you to trigger different actions at a different interface of a component’s life-cycle. You can use the component’s state and methods through an auto-bind property of life-cycle methods to your component.

Categories of VUEJS Lifecycle
Below are different four categories of lifecycle :
1. Creation (Initialization)
2. Mounting (DOM Insertion)
3. Updating (Diff & Re-render)
4. Destruction (Teardown)

Creation
This method allows you to perform actions before your component has even been added to the DOM. Unlike methods Use creation hooks if you need to set things up in your component both during client rendering and server rendering.

Creation methods are implemented using beforeCreate() and created() hooks. You can’t able to access to the DOM or the target mounting element (this.$el) inside of creation hooks.

beforeCreate() : The beforeCreate() hook runs at first when a component is still in the non-reactive mode and events that happen during the component’s lifecycle have yet not been set up. You can see in the examples below where x is undefined.

created() : The created() hook takes place when Vue has set up events and data observation. Here, templates have not yet been mounted or rendered but events are active and access to reactive data is enabled. Look at the code block below:

Mounting(DOM Insertion)
This method is widely used when working with components. It allows you to access your component immediately before and after it is rendered the first time. It is used when you want to modify the DOM of your component immediately before or after the initial render.

During server-side rendering, this method shouldn’t be used for fetching data for components on initialization. For that purpose, you can use created() methods

beforeMount() : This method is cited only after the template has been compiled and virtual DOM is updated by Vue. After this, the $el(element) property is added to the Vue instance, the native DOM is updated and the mounted() method is cited.

mounted() : The mounted() method you will have full access to the reactive component, templates, and rendered DOM. Mounted is the most generally used lifecycle hook. It is usually used for collecting the data for your component and then altering the DOM to amalgamate other libraries and frameworks asides Vue.  Let’s see the code block below:

Using the mounted() method to fetch this data from the DOM:

Updating
Updating methods are very useful for debugging purpose. This method is called whenever a reactive property used by your component changes or re-render occurs. The component’s DOM will be updated when this hook is called allowing you to use the updated methods to execute operations dependant on the DOM.

Note: Don’t use updating methods to change state, for that you can use computed properties or watchers. 

beforeUpdate() : This method is executed after the data changes on your component and the updated cycle starts exactly before the DOM is patched and re-rendered. It lets you obtain the new state of any kind of reactive data on your component prior to being rendered. Let’s look at the code block below:

updated() : The updated() method runs immediately after the data changes on your component and the re-rendering of DOM takes place. Let’s have a look at the code block below:

Interacting with our Vue instance:

Destruction
Last and final stage of a component’s life-cycle is Destruction method. In this it allows you to execute actions such as cleanup when your components have been destroyed and are performed when your components have been torn down and removed from the DOM.

beforeDestroy() : This method is performed before the components are destroyed. Here your components are still completely present and perfectly functional. If you want to cleanup events, beforeDestroy() is the best time to do that. Let’s take a look at the code block below:

destroyed() : This method is called only after your component has been destroyed, its directives have been unbound and its event listeners have been removed successfully. The destroyed() method allows you to do last minute cleanup or inform the remote server about the component being destroyed. Let’s take a look at the code block below:

Closing Note
Through this vuejs development services life-cycle, you should be able to visualize the journey of a Vue instance and get an idea about which method gets initialized at which phase of coding as well as it’s easy to customize your own whenever the need arises with help of various hooks or methods. For more details, you can go through the Vue’s documentation for the other methods and properties that can be used alongside with the life-cycle methods when you are creating your components.

More to learn here:
https://alligator.io/vuejs/
https://github.com/vuejs/vue

Source:
https://scotch.io/tutorials/demystifying-vue-lifecycle-methods#toc-creation
https://scotch.io/tutorials/demystifying-vue-lifecycle-methods#toc-mounting
https://scotch.io/tutorials/demystifying-vue-lifecycle-methods#toc-updating
https://vuejs.org/v2/guide/
codeingexplained.com