Vue.js Lifecycle

Vue js Lifecycle – Vue.js

What is Vue js

Vue js is a front-end JavaScript framework for building the user interface and single-page applications

Vue js lifecycle

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

There are eight lifecycles in Vue js

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. Updated
  7. BeforeDestroy
  8. Destroyed


  1. beforeCreate()

This is the primary lifecycle hook in vue, it’s referred to as once the Vue instance has been initialized. during this stage, events haven’t been established yet:


  1. created()

This is the second lifecycle hook that runs after beforeCreate() hooks. at this stage, Vue instance has been initialized and activated at the beginning of things like computed properties, watchers, events.


  1. beforeMount()

beforeMount Method invoked right before the initial render happens. at this stage template or render functions have been compiled:


  1. mounted()

In the mounted hook, you’ll have full access to the reactive part and the el(the DOM) has been replaced.  


  1. beforeUpdate()

This method is called when data property updates and before the DOM has been re-rendered.


  1. updated()

This method called when data property changed in your component and DOM re-rendered


  1. beforeDestroy()

beforeDestroy() Method is fired right before the Vue instance is destroyed.


  1. destroyed()

This method is called when a Vue instance has been destroyed.


Leave a Reply