fbpx

How to Use Lifecycle Hooks in Vue3

Lifecycle hooks in both Vue2 and Vue3 work very similarly – we still have access to the same hooks and we still want to use them for the same use cases.

However, with the introduction of the Composition API, the way we access these hooks has changed.

By the end of this article, you’ll know the new way to use lifecycle hooks in Vue3 and be on your way to writing better code. 

Let’s go!

What is the Composition API

If you don’t know already, the Vue3 Composition API comes with a setup() method. This method encapsulates most of our component code and handles reactivity, lifecycle hooks, etc. 

In short, the Composition API allows us to better organize our code into more modular features rather than separating based on the type of property (methods, computed, data).

The setup method is called right after the old beforeCreate hook and right before the created hook. So we no longer need these two hooks, we can simply put the code we would have had there in our setup() method. 

Adding our Lifecycle Hooks

Like most features in Vue3, lifecycle hooks are something that we have to import into our project. This is to help keep projects as lightweight as possible.

The way we import our lifecycle hooks is like this.

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

Excluding beforeCreate and created, there are 9 of the old lifecycle hooks that we can access in our setup method 

  • onBeforeMount – called before mounting begins
  • onMounted – called when component is mounted
  • onBeforeUpdate – called when reactive data changes and before re-render
  • onUpdated – called after re-render
  • onBeforeUnmount – called before the Vue instance is destroyed
  • onUnmounted – called after the instance is destroyed
  • onActivated – called when a kept-alive component is activated
  • onDeactivated – called when a kept-alive component is deactivated
  • onErrorCaptured – called when an error is captured from a child component

When we import them and access them in our code, it would look like this. 

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}

Converting from Vue2 to Vue3

This handy Vue2 to Vue3 lifecycle mapping is straight from the Vue3 Composition API docs and I think it’s one of the most useful ways to see exactly how things are going to be changing and how we can use them. 

  • beforeCreate -> use setup()
  • created -> use setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

New Debug Hooks

There are also two brand new hooks that we can use in Vue3 for debugging purposes. They are:

  1. onRenderTracked
  2. onRenderTriggered

Both of these events take a DebuggerEvent that allow us to tell what is causing a re-render in our Vue instance. 

export default {
  onRenderTriggered(e) {
    debugger
    // inspect which dependency is causing the component to re-render
  }
}

And that’s it!

If you already have experience with Vue, then this is going to be a very easy switch to make. It’s just a matter of importing the hooks and including them in your setup method. 

Here’s a neat article about WHEN to use each lifecycle hook. 

I hope this helped you understand a little bit more about the changes in Vue3 and how to implement them in your projects. 

Happy coding!