Vue.js for Beginners 2024 #VueJs Part 7 : Understanding Lifecycle Hooks

Lifecycle hooks are an essential feature of Vue.js that allow you to run code at specific stages of a component's lifecycle. In this post, we’ll explore what lifecycle hooks are and how to use them effectively in your Vue applications.

- What Are Lifecycle Hooks?
Lifecycle hooks are methods that get called at different stages of a component's life, from creation to destruction. Understanding these hooks helps you to manage side effects, perform data fetching, and set up your components properly.

Common Lifecycle Hooks

Here are some of the most commonly used lifecycle hooks in Vue.js:

created: Called after the instance is created, but before mounting. This is a great place for data fetching.

mounted: Called after the component is mounted to the DOM. This is often where you can interact with the DOM or perform operations that require the component to be visible.

updated: Called after a reactive data property changes and the DOM is re-rendered. This hook can be useful for responding to data changes.

destroyed: Called when the component is destroyed. Use this hook to clean up any resources (like timers or event listeners).

- Example of Lifecycle Hooks
Let’s look at a simple example to see how these hooks can be used in a Vue component.

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  created() {
    console.log('Component is created!');
  },
  mounted() {
    console.log('Component is mounted to the DOM!');
  },
  updated() {
    console.log('Component is updated!');
  },
  destroyed() {
    console.log('Component is destroyed!');
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, World!'; // Triggers the updated hook
    },
  },
};
</script>

Explanation:

created: This hook logs a message to the console when the component is created.
mounted: This hook logs a message once the component is mounted to the DOM.
updated: When the button is clicked and the message changes, this hook gets called, logging a message to the console.
destroyed: This hook will log when the component is destroyed, which is useful for cleanup tasks.

When to Use Lifecycle Hooks

Understanding when to use each hook is crucial:

• Use created for fetching data before the component is rendered.
• Use mounted for DOM manipulation or third-party library integration that needs the component to be visible.
• Use updated to respond to changes in data.
• Use destroyed for cleanup tasks to prevent memory leaks.

Conclusion

In this post, we’ve explored the basics of lifecycle hooks in Vue.js. These hooks provide a powerful way to control the behavior of your components throughout their lifecycle. In the next part of our series, we’ll look into more advanced concepts like custom directives and filters.

I hope you found this post informative! If you have any questions or comments, feel free to leave them below.