Understanding VueJS Lifecycle Hooks

Lifecycle hooks in VueJS allow you to run custom code at specific stages of a component's lifecycle. This guide covers the basics of lifecycle hooks in VueJS, including their usage and practical applications.

Common Lifecycle Hooks

beforeCreate

Called synchronously after the instance has been initialized, before data observation and event/watcher setup.

// JavaScript
new Vue({
  beforeCreate() {
    console.log('beforeCreate');
  }
});

created

Called synchronously after the instance is created. At this stage, the instance has finished processing options, which means data observation, computed properties, methods, and watchers are set up. However, the DOM has not been mounted yet.

// JavaScript
new Vue({
  created() {
    console.log('created');
  }
});

beforeMount

Called right before the mounting begins: the render function is about to be called for the first time.

// JavaScript
new Vue({
  beforeMount() {
    console.log('beforeMount');
  }
});

mounted

Called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

// JavaScript
new Vue({
  mounted() {
    console.log('mounted');
  }
});

beforeUpdate

Called when the data changes, before the DOM is patched. This allows you to perform operations before the data changes in the DOM.

// JavaScript
new Vue({
  beforeUpdate() {
    console.log('beforeUpdate');
  }
});

updated

Called after the data has been changed in the DOM.

// JavaScript
new Vue({
  updated() {
    console.log('updated');
  }
});

beforeDestroy

Called right before a Vue instance is destroyed. You can perform cleanups in this hook.

// JavaScript
new Vue({
  beforeDestroy() {
    console.log('beforeDestroy');
  }
});

destroyed

Called after a Vue instance has been destroyed.

// JavaScript
new Vue({
  destroyed() {
    console.log('destroyed');
  }
});

Practical Applications

Fetching Data

Use the created or mounted hooks to fetch data when a component is created or mounted:

// JavaScript
new Vue({
  data() {
    return {
      items: []
    };
  },
  created() {
    fetch('https://api.example.com/items')
      .then(response => response.json())
      .then(data => {
        this.items = data;
      });
  }
});

Managing State

Use the beforeUpdate and updated hooks to perform operations before and after data updates:

// JavaScript
new Vue({
  data() {
    return {
      counter: 0
    };
  },
  beforeUpdate() {
    console.log('Before update:', this.counter);
  },
  updated() {
    console.log('After update:', this.counter);
  }
});

Cleaning Up Resources

Use the beforeDestroy and destroyed hooks to clean up resources:

// JavaScript
new Vue({
  data() {
    return {
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      console.log('Interval running');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
    console.log('Interval cleared');
  }
});

Best Practices

Follow these best practices when using lifecycle hooks in VueJS:

• Use Lifecycle Hooks Appropriately: Use each lifecycle hook for its intended purpose to keep your code organized and maintainable.
• Cleanup Resources: Always clean up resources such as intervals, event listeners, and other side effects in the beforeDestroy hook to avoid memory leaks.
• Avoid Heavy Computations: Avoid performing heavy computations or blocking operations in lifecycle hooks to keep the UI responsive.
• Document Lifecycle Hooks: Document the usage of lifecycle hooks in your components to make your code easier to understand and maintain.

Example Application

Here is an example application that demonstrates using lifecycle hooks in VueJS:

  
Lifecycle Hooks Example
  
Counter: {{ counter }}
  Increment




                

Summary

This guide provided an overview of the lifecycle hooks in VueJS, including their usage and practical applications such as fetching data, managing state, and cleaning up resources. By understanding and utilizing these lifecycle hooks, you can create robust and maintainable VueJS applications.