Things to know about events in VueJS component life cycle

VueJS is a reactive javascript framework which is popular among front-end developers. Vue can be used to built large scale single page applications and user interfaces. It is light weight and easy to learn.

Today i’m going to describe some points we should know regarding Instance lifecycle hook of Vuejs.I guess you have the basic idea rearding the instance life cycle of vuejs. If not you can refers to the official Vuejs API guide.

https://vuejs.org

There are mainly 8 life cycle methods as given below.

1. Before create
2. Created
3. Before mount
4. Mounted
5. Before update
6. Updated
7. Before destroy
8. Destroyed

This is the order of method which will take place during a component life cycle.

When we are implementing our code inside these method we should be consider about certain points. Unless, there may be some issues occure during creating instance and runs through the life cycle.

• Life cycle events of the the component are sync by default. Which means that code will be execute by order after hoisted.
• We can use async , if we need to use them as async functions.But life cycle methods will execute as sync by default.

some important points are:

• If we need we can make created method as async to implement some async calls. But it is better if we can check about the data availability for that call when the created event take place in the component.
• It is most suitable if we can use mounted event to declare our async calls. Because when it comes to mounted, the data will be available while there’s full access to reactive component, template and rendered DOM.
• And some people suggest not to use async for created event.
• And we should destroy event buses , watches ,delete variables and clean the component in the beforeDestroy event.