When a Vue instance is created in Vue.js, it goes through a series of steps after creation. First, they are created then mounted and after that destroyed at the end. In this process, it also runs functions known as life cycle hooks. These life cycle hooks allow the developers to add their own code at a specific stage.

Following is the list of all events or hooks a Vue instance goes through:

beforeCreate event: This is the first event or hook that occurs in the creation process. It facilitates developers to perform actions even before the component has been added to the DOM. We cannot access the DOM inside of this event.

created event: This event is used to run the code after creating the instance. It facilitates you to access the reactive data, but the mounting or rendering of templates and Virtual DOM is not completed yet.

beforeMount event: The beforeMount event is used to execute just before the initial render happens and after the template or render functions have been compiled. This is the rarely used event, and in most cases, you don’t need to use this event.

mounted event: This is the most frequently used event or hook. In this event, you have full access to the reactive component, templates, and rendered DOM.

beforeUpdate event: This event is executed just before the data changes on the component and the update cycle’s start. It runs right before the DOM is patched and re-rendered.

updated: This event is used to execute after the data changes on the component and the DOM re-renders. If you want to access the DOM after a property change, it is the best place to complete this action.

beforeDestroy: This event is used to execute just before tearing down the instance. This is the second last step of the Vue Instance life process and is the right place to clean up events or reactive subscriptions if you have to do this.

destroyed: This is the last step of the Vue Instance life process and used to do any last minute clean up.