Life cycle hooks in Vuejs

The vue component undergoes these 4 phases of life cycle hooks.The lifecyle means the navigation path of the component during its execution.

We will look into the life cycle hooks one by one.

The first phase is the creation phase.So in this phase the component is about to be created.This phase is drill down into two methods

• BeforeCreate()

• Created()

The data properties,methods,computed properties will not be created in BeforeCreate().They are processed and ready to be used in the Created().
The created() are mostly used in your project.The created() are good place for calling API's.

The second phase is the mounting phase.It is this phase the component template or HTML is actually MOUNTED on to the DOM , which you see on the browser. In this phase we have 2 more methods.

• BeforeMount()

• Mounted()

BeforeMount: If your component needs to be modified immedietely before rendering to the browser.
Mounted: Here the DOM is ready to be accessed.In this phase, you can directly get the input element of the DOM.

The third phase is the updating phase.This phase is fired when data or computed propteries used by the component changes or the component rerenders.There are 2 methods in this phase also.

• BeforeUpdate()

• Updated()

BeforeUpdate: It is called before data changes and before DOM is rendered. Updated: It is called after the patch has been applied to the DOM.

The fourth phase is the Unmounting phase.It is related to the phase has been removed from the DOM.There are 2 methods in this phase.

• BeforeUnmount()

• Unmounted()

BeforeUnmount: The most used method is beforeunmount as this method is fully functional.You can do following operations like the removing the network request,removing manual event listeners,invalidating timers.
Unmounted:When this method is called , all directives of the component instance have been unbound,all event listeners are removed. This hook is not called during server side rendering.

Life Cycle Hooks of Vue:-

Other Hooks:

The other hooks are Activated,Deactivated,ErrorCaptured,RenderTracked,RenderTriggered.

Activated:

This is called when kept alive component is activated.
Note:This hook is not called during server side rendering.

De-Activated:

This is called when kept alive component is Deactivated.
Note:This hook is not called during server side rendering.

Error Captured:

This is called when error from any descendent component is captured.
This errorcaptured hook receives 3 parameters(err,vm,info).
err - Error trace
vm - Component in which error occured
info - vue specific error information such as lifecycle hooks,events etc.
The hook can return false to stop the error.

The last two hooks such as RenderTracked and RenderTriggered are useful for debugging purposes.

RenderTracked:

This is called when DOM is rerender.This event tells you what operation tracked the component.

RenderTriggered:

This is called when DOM rerender is triggered.This event tells you what operation triggered the rerendering of the component.

Happy Vue Coding !!!