How to Use Lifecycle Hooks in Vue Composition API

In Vue's Composition API, you use lifecycle hooks by importing functions like onMounted, onUpdated, and onUnmounted from 'vue' and calling them inside the setup() function. These hooks let you run code at specific moments in a component's life, such as when it is created, updated, or destroyed.

Syntax

Vue provides lifecycle hook functions that you import from 'vue' and call inside the setup() function. Each hook corresponds to a stage in the component's life.

• onMounted(() => { ... }): Runs after the component is added to the page.
• onUpdated(() => { ... }): Runs after the component updates its DOM.
• onUnmounted(() => { ... }): Runs just before the component is removed.

javascript

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // code to run when component mounts
    });

    onUpdated(() => {
      // code to run when component updates
    });

    onUnmounted(() => {
      // code to run when component unmounts
    });
  }
}

Example

This example shows a component that logs messages at different lifecycle stages using the Composition API hooks.

javascript

import { ref, onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('Component mounted');
    });

    onUpdated(() => {
      console.log('Component updated');
    });

    onUnmounted(() => {
      console.log('Component unmounted');
    });

    function increment() {
      count.value++;
    }

    return { count, increment };
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `
};

Output

When the component appears on the page, console logs: 'Component mounted'.
Each time the button is clicked, console logs: 'Component updated'.
When the component is removed, console logs: 'Component unmounted'.

Common Pitfalls

Common mistakes include:

• Calling lifecycle hooks outside the setup() function, which will not work.
• Forgetting to import the hooks from 'vue'.
• Using the Options API lifecycle hook names inside setup() instead of the Composition API functions.

javascript

/* Wrong: lifecycle hook called outside setup */
import { onMounted } from 'vue';
onMounted(() => {
  console.log('This will not work');
});

/* Right: lifecycle hook inside setup */
export default {
  setup() {
    onMounted(() => {
      console.log('This works');
    });
  }
};

Quick Reference

Lifecycle Hook	When It Runs	Usage
onBeforeMount	Before the component mounts	onBeforeMount(() => { /* code */ })
onMounted	After the component mounts	onMounted(() => { /* code */ })
onBeforeUpdate	Before the component updates	onBeforeUpdate(() => { /* code */ })
onUpdated	After the component updates	onUpdated(() => { /* code */ })
onBeforeUnmount	Before the component unmounts	onBeforeUnmount(() => { /* code */ })
onUnmounted	After the component unmounts	onUnmounted(() => { /* code */ })
onErrorCaptured	When an error is captured	onErrorCaptured((err) => { /* code */ })

Key Takeaways

Use lifecycle hooks inside the setup() function by importing them from 'vue'.

Each hook runs at a specific stage: mounting, updating, or unmounting.

Always call hooks as functions with a callback, e.g., onMounted(() => { ... }).

Do not use Options API lifecycle hook names inside setup; use Composition API functions instead.

Remember to import the lifecycle hook functions before using them.