Vue Instance Lifecycle Hooks cheatsheet

With the simple console log lets understand the sequence in which each lifecycle hook is executed when loading, updating vue app.

const app = Vue.createApp({
  data() {
    return {
      displayText: 'Welcome to the would of vue lifecycle',
    };
  },
  beforeCreate() {
    console.log('beforeCreate(): ');
    console.log('call http request, initialize  timers etc.');
  },
  created() {
    console.log('created(): ');
    console.log('vue initialized but not mounted, still nothing loaded on screen');
  },
 
  beforeMount(){
    console.log('beforeMount(): ');
    console.log('right before something is loaded on screen');
  },
  mounted(){
    console.log('mounted(): ');
    console.log('data, template loaded on screen');
  },
  
  beforeUpdate() {
    console.log('beforeUpdate(): ');
    console.log('data is updated but not loaded on screen');
  },
  updated() {
    console.log('updated(): ');
    console.log('data is processed and screen reflects new change');
  },
  beforeUnmount() {
    console.log('beforeUnmount(): ');
    console.log('last chance to make changes to the app, screen not changed');
  },
  unmounted() {
    console.log('unmounted(): ');
    console.log('app is unmounted. screen updated');
  },
});
app.mount('#app');
setTimeout(function () {
  app.unmount(); //not realistic way to unmount your application
}, 3000);

vue hooks