Vue Lifecycle Hooks 101

Understanding Vue Lifecycle Hooks: A Comprehensive Guide

Vue is a progressive JavaScript framework used by over 870,000 developers worldwide. Its popularity stems from its approachable core library and robust ecosystem of supporting libraries. In this article, we’ll explore the lifecycle hooks available in Vue and how to use them effectively.

Prerequisites

Before diving into lifecycle hooks, ensure you have Node.js ≥v10.x installed on your machine. You’ll also need npm ≥v6.7, a code editor (such as Visual Studio Code), Vue 3, and the Vue CLI 3.0.

Creating a Vue Application Instance

To start a new Vue application, create a new application instance with the createApp function. Every app requires a root component that will contain other components as its children.

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Understanding Vue Lifecycle Hooks

Lifecycle hooks are functions that run at different stages of a Vue application’s lifecycle. They provide a way to execute custom logic during the creation, mounting, updating, and destruction of a Vue instance.

Creation Hooks

Creation hooks are called when a Vue instance is created.

• setup(): This hook is called immediately after the application instance has been initialized. It replaces the beforeCreate and created hooks used in the Options API.

import { ref, onMounted } from 'vue';

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

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

    return { count };
},
};

Mounting Hooks

Mounting hooks are called when a Vue instance is mounted to the DOM.

• onBeforeMount(): This hook is called before the instance is mounted on the DOM.
• onMounted(): This hook is called after the instance has been mounted.

import { ref, onBeforeMount, onMounted } from 'vue';

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

    onBeforeMount(() => {
      console.log('Before mount!');
    });

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

    return { count };
},
};

Updating Hooks

Updating hooks are called when a Vue instance is updated.

• onBeforeUpdate(): This hook is called before the instance is updated.
• onUpdated(): This hook is called after the instance has been updated.

import { ref, onBeforeUpdate, onUpdated } from 'vue';

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

    onBeforeUpdate(() => {
      console.log('Before update!');
    });

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

    return { count };
},
};

Destruction Hooks

Destruction hooks are called when a Vue instance is destroyed.

• onBeforeUnmount(): This hook is called before the instance is unmounted.
• onUnmounted(): This hook is called after the instance has been unmounted.

import { ref, onBeforeUnmount, onUnmounted } from 'vue';

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

    onBeforeUnmount(() => {
      console.log('Before unmount!');
    });

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

    return { count };
},
};

By understanding and using Vue lifecycle hooks effectively, you can add custom logic to your applications and improve their performance and functionality.