What are lifecycle hooks in Vue JS?

Lifecycle hooks are pre-defined methods that get executed in a certain order, starting from the initialization of the Vue instance to its destruction.

Below is a diagram that indicates the Vue JS lifecycle hooksmethods sequence.

There are eight lifecycle hooks in Vue JS:

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

beforeCreate

beforeCreate is the first lifecycle hook that gets called in Vue JS. beforeCreate is called right after a new Vue instance is initialized. Here, the computed properties, watchers, events, data properties, etc., are not set up.

<script>
  export default {
    beforeCreate() {
      console.log('beforeCreate hook called');
    }
  }
</script>

created

created is the next lifecycle hook that gets called after the beforeCreate hook. Here, the computed properties, watchers, events, data properties, etc., are also activated.

<script>
  export default {
    data() {
      return {
        msg: "Hello World",
      }
    }
    created() {
      console.log('created hook called', this.msg);
    }
  }
</script>

We will be able to access the data properties that were not accessible in the previous hook.

beforeMount

beforeMount is the next lifecycle hook that gets called after the created hook and right before the Vue instance is mounted on the DOM. The template and the styles are all compiled here, but the DOM cannot be manipulated yet.

<script>
  export default {
    beforeMount() {
      console.log('beforeMount hook called');
    }
  }
</script>

mounted

mounted is the next lifecycle hook that gets called after the beforeMount hook and right after the Vue instance has been mounted. The app component or any other component becomes functional and is ready to use.

<script>
  export default {
    mounted() {
      alert('mounted has been called'); 
     }
  }
</script>

beforeUpdate

beforeUpdate is the next lifecycle hook called after the mounted hook. beforeUpdate is called any time a change is made to the data that requires the DOM to be updated.

<template>
  <p> 
    {{ msg }}
  </p>
</template>

<script>
   export default {
     data() {
       return {
         msg: "Hello World",
       }
     },
     beforeUpdate(){
       console.log('beforeUpdate hook called');
     },
     mounted(){
       this.$data.hello= 'This is Shubham Kshatriya!';
     }
   }
</script>

updated

updated is the next lifecycle hook. updated is called after the beforeUpdate hook and just after a DOM update has occurred.

<template>
  <p> 
    {{ msg }}
  </p>
</template>

<script>
   export default {
     data() {
       return {
         msg: "Hello World",
       }
     },
     beforeUpdate(){
       console.log('beforeUpdate hook called');
     },
     updated(){
       console.log('updated hook called');
     },
     mounted(){
       this.$data.hello= 'This is Shubham Kshatriya!';
     }
   }
</script>

beforeDestroy

The beforeDestroy hook is called just before a Vue instance is destroyed. The instance and all the methods are still functional. We can do resource management here.

<script>
   export default {
     data() {
       return {
         msg: "Hello World!",
       }
     },
     beforeDestroy() {
       console.log('beforeDestroy hook called');
       this.msg = null
       delete this.msg;
     }
  }
</script>

destroyed

destroyed is the last stage lifecycle hook, where the entire Vue instance gets destroyed. Event listeners, mixins, and all directives get unbounded here.

<script>
   export default {
     destroyed() {
       this.$destroy() 
       console.log('destroyed hook called')
     }
   }
</script>