DEV Community

Cover image for VueJS part 7: Lifecycle methods
Kristijan Pajtasev
Kristijan Pajtasev

Posted on • Originally published at kristijan-pajtasev.Medium

VueJS part 7: Lifecycle methods

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. Every application and component has its lifecycle, and quite often it happens that we need to do something during some specific stage. That is why there are lifecycle methods. Functions that are executed in the specific stages of the application. In this post, I am covering which lifecycle stages of Vue are, and which methods you can use to access them.

Vue Lifecycle

Image description

beforeCreate

This method runs before anything starts in VueJS. Think of it as some action before there is an initialization object.
created

At this moment, there is an initialization object, but the template is still not compiled.

beforeMount

This stage is when your template is compiled but it is still not shown in your browser.

mounted

At this stage, the template has been compiled and shown in your browser. The moment that happens, this method gets triggered. This might be a place you might trigger if you need to access some HTML element from your component.

beforeUpdate

With the change of data, components do get changed. And if you want to take some action on it but before it gets re-rendered, this is a place to do it.

updated

Very similar to the beforeUpdate method, the difference is that this method runs when component data is updated and gets re-rendered.

beforeUnmount

Sometimes, components will get removed from your DOM. But you might want to do some cleanup tasks before such thing happens like clearing times. When the removing process starts, but before the component gets removed, this is the method that gets triggered.

unmount

Finally, the last step of the lifecycle is the unmount method. It runs once the component is completely removed from the DOM.


The code used in this article can be found in my GitHub repository.


For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

Top comments (0)