Vue.js Lifecycle Hooks

Vue.js provides several lifecycle hooks that allow you to execute custom code at specific stages of a component's life. These hooks provide you with the means to add your own functionality and logic during the different phases of a component's lifecycle.

Syntax

The following is the syntax for defining a Vue.js lifecycle hook:

new Vue({
  // ...
  beforeCreate() {
    // custom code
  },
  created() {
    // custom code
  },
  beforeMount() {
    // custom code
  },
  mounted() {
    // custom code
  },
  beforeUpdate() {
    // custom code
  },
  updated() {
    // custom code
  },
  beforeDestroy() {
    // custom code
  },
  destroyed() {
    // custom code
  }
  // ...
})

Example

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <button @click="toggleMessage">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, world!",
      showMessage: true,
      buttonText: "Hide Message"
    }
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage
      this.buttonText = this.showMessage ? "Hide Message" : "Show Message"
    }
  },
  beforeCreate() {
    console.log("beforeCreate() hook called.")
  },
  created() {
    console.log("created() hook called.")
  },
  beforeMount() {
    console.log("beforeMount() hook called.")
  },
  mounted() {
    console.log("mounted() hook called.")
  },
  beforeUpdate() {
    console.log("beforeUpdate() hook called.")
  },
  updated() {
    console.log("updated() hook called.")
  },
  beforeDestroy() {
    console.log("beforeDestroy() hook called.")
  },
  destroyed() {
    console.log("destroyed() hook called.")
  }
}
</script>

Output

The output of the above example will be a button and a paragraph. Clicking the button will toggle whether or not the message is displayed.

Explanation

Each lifecycle hook corresponds to a specific phase of a Vue component's lifecycle. The phases are as follows:

• creation - beforeCreate, created
• mounting - beforeMount, mounted
• updating - beforeUpdate, updated
• destruction - beforeDestroy, destroyed

Each hook provides a specific opportunity to interact with the component's state and perform custom logic.

Use

Vue.js lifecycle hooks are useful for a variety of tasks, including:

• Fetching data from a remote source when a component is created
• Modifying data before it's displayed to the user
• Performing cleanup tasks when a component is destroyed

Important Points

• Vue.js provides a number of lifecycle hooks that correspond to different phases of a component's lifecycle.
• Each hook provides a way to execute custom code during a specific phase of a component's lifecycle.
• Lifecycle hooks can be used to fetch data, modify data, and perform cleanup tasks.

Summary

Vue.js lifecycle hooks provide a powerful mechanism for customizing the behavior of your Vue components. The hooks can be used to interact with a component's state and perform custom logic during specific phases of its lifecycle. Understanding the different hooks and their purposes is crucial for building effective and efficient Vue.js applications.