Lifecycle

At different stages in an applications rendering and initialization, you will want to run logic or even make api calls. That is what lifecycle methods are used for.

Vue provides several methods at different stages of the application lifecycle. This is an image taken directly from Vue JS Organization website:

For now, we are going to skip the composition api setup lifecycle.

*beforeCreate

The first lifecycle methods is “beforeCreate”. This is ran at the initialization stage of the component. At this point you do not have access to data or events. This is a good method to access local storage to see if a user is currently logged in to your website.

*created

The “created” method has access to data and events. It runs before the Virtual DOM and templates have been created. Here you can call an API and set the information to your data.

*beforeMount

The “beforeMount” method runs after the first render. Also it runs after the template has been compiled.

*mounted

The “mounted” method runs after the DOM nodes are created and inserted. You have access to the template, rendered DOM, and reactive component. You can use this.$el to see what is available. This the most commonly used lifecycle method.

Update Methods

These methods are part of the rerender cycle triggered by updates in reactive properties.

*beforeUpdate

The “beforeUpdate” method is called before the DOM is re-rendered. It’s useful for changing any reactive data that needs to be displayed before the render.

*updated

The “updated” runs after the rerender and gives you access to the DOM after a property change.

Unmount Methods

*beforeUnmount

This fires right before a component unmounts from the DOM. You still have access to DOM elements here and this.$el, watchers, and methods. This is useful for notifying a server about deletion events.

*unmount

This fires after the component is removed. You still have access to this.$el and can be used to clean up data or event listeners or timers.