11 Vue.js Lifecycle Hooks

Let’s understand how and when to use them with handy examples

Luca Spezzano
Published in
5 min readSep 17, 2019


Photo by Evie S. on Unsplash

Something that you absolutely need to know when you approach Vue.js for the first time is its Lifecycle Hooks.

You can go deep to start writing your JavaScript logic inside methods or computed properties and so on. Of course, I understand that when you are excited about learning a new technology you want to see it in action fast (I did exactly that btw ), but I guarantee you that understanding these Hooks will give you a strong foundation to learn this Javascript Framework.

If you get confused with methods and computed properties when you start with Vue.js, I suggest you read this article.

The Vue instance

The core of Vue.js is its instance. Every Vue application starts by creating one and it is an object that will help you to create your desired behavior.

The Vue instance contains different options[1]: data, props, template, methods, computed, watchers, lifecycles and much more.

As you can imagine the instance is the responsible for different things, for example setting data observation, compiling the template, mounting the instance to the DOM, updating the DOM when data changes and others. I invite you to read the documentation here if you are interested to know more about all these arguments.

The Vue lifecycle hooks

The lifecycle hooks are functions that give you the opportunity to add code at specific stages.

There are 11:

  • beforeCreate
  • create
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  • errorCaptured



Luca Spezzano

Frontend developer focused on CSS architecture of scalable and maintainable large scale projects and the development of amazing user interfaces.