The Lifecycles of Vue.js

Amolik Vivian Paul — Tue, 24 Aug 2021 20:44:14 +0000

Introduction

Lifecycle Hooks are special methods, or peepholes to give us ideas on how things work behind-the-scenes of a library (React) or framework (Vue). These methods allow you to know when a component is created, added to the DOM, updated, or destroyed in the Vue instance.

Note : All lifecycle hooks automatically have their this context bound to the instance, so that you can access data, computed properties, and methods.

The Hooks

The Creation Hooks

beforeCreate
The beforeCreate hook runs whenever a component is initialized. None of the data, or methods are setup during this.



<script>
export default {
  beforeCreate() {
    console.log('Lifecycle Initialized')
  }
}
</script>

created
During the created hook, we can access all reactive data members and methods as part of our component. The DOM is yet to be mounted.



<script>
export default {
  data() {
    return {
      data: ""  
    }
  },
  created() {
    this.data = "Created lifecycle called";
  }
}
</script>

The Mounting Hooks

beforeMount
The beforeMount hook runs before the initial render of the components and after the template or render functions have been compiled.



<script>
export default {
  beforeMount() {
    console.log(`vm.$el has not been created yet`)
  }
}
</script>

mounted

In the mounted hook, we have access to the reactive components, and rendered DOM (via this.$el).



<script>
export default {
  mounted() {
    console.log(`At this point, vm.$el has been created and el has been replaced.`);
  }
}
</script>

The Updating Hooks

beforeUpdate

The beforeUpdate hook runs after data changes on your component, right before the DOM is patched and re-rendered.



<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  beforeUpdate() {
    console.log(this.counter)
  }
}
</script>

updated

The updated hook runs after data changes on your component and the DOM re-renders.



<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  updated() {
    console.log(`At this point, Virtual DOM has  re-rendered and patched.`)
    // Fired every second, should always be true
    console.log(this.counter);
  }
}
</script>

The Destroying Hooks

beforeDestroy

The beforeDestroy is invoked right before teardown or destroyed. The component completely exists and is totally functional.



<script>
export default {
  beforeDestroy() {
    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
  }
}
</script>

destroyed

The destroyed hook is when everything part of the component has been torn down, or destroyed from existence. This method is useful for all cleanup required within the component.



<script>
export default {
  destroyed() {
    console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
  }
}
</script>

For more to learn about VueJS, click here.