1. Understanding Lifecycle Hooks in Vue.js

• Every Vue component goes through a series of lifecycle stages, from creation to mounting, updating, and finally unmounting.
• Lifecycle hooks enable developers to run logic at specific stages in the component’s lifecycle.

2. Lifecycle Stages and Hooks (Options API)

Vue provides several lifecycle hooks in the Options API:

1. beforeCreate() - Runs before the component is initialized (data and props are not yet reactive).
2. created() - Runs after the component is initialized, and reactive properties are available.
3. beforeMount() - Runs before the component is inserted into the DOM.
4. mounted() - Runs when the component is inserted into the DOM (ideal for API calls and event listeners).
5. beforeUpdate() - Runs before the component re-renders due to data changes.
6. updated() - Runs after the component re-renders.
7. beforeUnmount() - Runs before the component is removed from the DOM.
8. unmounted() - Runs after the component is removed from the DOM (cleanup operations should be performed here).

Example: Lifecycle Hooks in Options API

<template>
  <div>
    <p>Message: {{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  beforeCreate() {
    console.log("beforeCreate: Component is being initialized.");
  },
  created() {
    console.log("created: Component initialized. Data is now reactive.");
  },
  beforeMount() {
    console.log("beforeMount: Template is compiled but not yet in the DOM.");
  },
  mounted() {
    console.log("mounted: Component has been mounted in the DOM.");
  },
  beforeUpdate() {
    console.log("beforeUpdate: Data is about to change.");
  },
  updated() {
    console.log("updated: Data has changed, and the DOM is updated.");
  },
  beforeUnmount() {
    console.log("beforeUnmount: Component is about to be removed.");
  },
  unmounted() {
    console.log("unmounted: Component has been removed from the DOM.");
  },
  methods: {
    updateMessage() {
      this.message = "Updated Vue Message!";
    }
  }
};
</script>

What Happens in the Example?

• The lifecycle hooks print messages to the console at different stages.
• Clicking the button updates the message, triggering beforeUpdate() and updated().
• If the component is removed from the DOM, beforeUnmount() and unmounted() execute.

3. Lifecycle Hooks in Composition API

In Vue 3, the Composition API introduces new ways to use lifecycle hooks with setup(). The hooks follow the same functionality but are imported separately.

Common Lifecycle Hooks in Composition API

• onBeforeMount()
• onMounted()
• onBeforeUpdate()
• onUpdated()
• onBeforeUnmount()
• onUnmounted()

Example: Lifecycle Hooks in Composition API

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref, onMounted, onUpdated, onUnmounted } from "vue";

export default {
  setup() {
    const message = ref("Hello Vue!");

    const updateMessage = () => {
      message.value = "Updated Vue Message!";
    };

    onMounted(() => {
      console.log("onMounted: Component is mounted.");
    });

    onUpdated(() => {
      console.log("onUpdated: Component has been updated.");
    });

    onUnmounted(() => {
      console.log("onUnmounted: Component is removed.");
    });

    return { message, updateMessage };
  }
};
</script>

What Happens in the Example?

• onMounted() runs when the component is added to the DOM.
• onUpdated() runs when the state updates (e.g., changing the message).
• onUnmounted() executes when the component is removed from the DOM.

4. When to Use Lifecycle Hooks?