Instance is the core of Vue.js. We start our Vue application by creating a vue instance and it will help to create the needed behavior. Lifecycle Hooks are easy to understand. You have to put your thought into making certain you are putting code in the optimal hook. Each VueJS lifecycle hook is divided into two hooks before that event and after the event. The four main events that can be used in Vue applications is Creation, mounting, Updates, Destruction.

Create Hook

When we start the vue.js lifecycle creation hooks are the first thing that runs on your app. As we said before it has two parts beforeCreate() and afterCreate(). 

beforeCreate()- beforeCreate() does not have access to any of the component’s reactive data and events since created hooks what initializes all of these data and events. When you need some logic/API call that doesn't need to be assigned to data you can use beforeCreate hook. After the state is initialized all the data we assigned will be lost. 

Created()- Now we have access to the component's data and events.When you are handling reading/writing the reactive data it is useful. For example making an API call and storing the value can be done here. 

Mounting Hook

The mounting hooks does the mounting and rendering of the components.

beforeMount()- It is called right before the component DOM is rendered and mounted. this.$el doesn’t exist in this step. 

mounted()- mounted() is called after the first render of the component. this.$el is available and allowing for direct DOM access. If you want to access all the child components   make sure they are available by wrapping the code inside your mounted method in a this.$nextTick(). 

Update Hooks

These updated events are triggered whenever reactive data is modified.

beforeUpdate()- This runs before the data is changed and the component is called again. 

updated()- It is similar to mounted. If you want to make sure all your child components are updated use nextTick() method.

Destruction Hooks

These hooks are used in the process of removing a component to clean up all the loose ends. 

beforeDestroy()- In this stage all of your components are still functional since it is the stage right before destroying. You can clean up event listeners and most of the jobs in this step.

destroyed()- At this point you have torn everything apart! So there is nothing much to do other than using console.log(this) to see what is left.