Lifecycle Hooks

In Vue, lifecycle hooks are special methods that allow us to hook into the lifecycle of a Vue instance or component.

Hooks provide us an opportunity to perform actions at specific points in the lifecycle, such as before the component is created, mounted, updated, or destroyed.

These hooks are useful for performing setup tasks, fetching data, subscribing to events, and cleaning up resources.

Here are the main lifecycle hooks available in the order they are called:

beforeCreate:

This hook is called synchronously immediately after the Vue instance is initialized, but before data observation and event/watcher setup.

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log("Component is about to be created");
  },
};
</script>

created:

This hook is called synchronously after the instance has been created.

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  created() {
    console.log('Component has been created');
  }
};
</script>

At this stage, the data has been observed, but the template has not yet been mounted or rendered.

beforeMount:

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
};
</script>

This hook is called right before the Vue instance mounts and renders the template.

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('Component has been mounted to the DOM');
  }
};
</script>

At this stage, the template has been compiled and is about to be inserted into the DOM.

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to be updated');
  }
};
</script>

mounted:

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
};
</script>

This hook is called after the Vue instance has been mounted to the DOM, and the template has been rendered.

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
};
</script>

beforeUpdate:

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
};
</script>

This hook is called right before the Vue instance re-renders and updates the DOM due to changes in data.

Example:

<template>
  <div>
    <h1>This is a Heading 1</h1>
  </div>
</template>

<script>
export default {
  errorCaptured(err, vm, info) {
    console.error('Error occurred in component:', err);
    console.error('Vue component instance:', vm);
    console.error('Error info:', info);
  }
};
</script>

updated:

This hook is called after the Vue instance has re-rendered and updated the DOM with changes in data.

beforeUnmount:

This hook is called right before the Vue instance is unmounted and destroyed.

unmounted:

This hook is called after the Vue instance has been unmounted and destroyed.

errorCaptured:

This hook is called when an error occurs during the component's lifecycle. It allows us to catch errors that occur in child components.

Note:

These lifecycle hooks provide us with various points in a component's lifecycle where we can execute custom logic.

They are useful for setting up data, managing state, interacting with external APIs, performing cleanup tasks, and handling errors effectively in our Vue applications.

<-- Form Inputs

Animations -->