Lifecycle Hooks with the Composition API in Vue 3

In Vue, lifecycle hooks are stages or points in a components lifecycle where you can execute custom code that perform specific actions during the components existence.

In this post we are going to look at the points/stages in the lifcycle where we can execute our custom code.

onMounted

We use this hook to run code after the component has rendered/has been mounted

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log("The component has finished rendering!")
})
</script>

<template>
  <div></div>
</template>

onUpdated

This hook is used to run code after a component has updated its DOM tree due to a reactive state change. It is advised not to change component state in this hook, unless you want to see an infinite update loop in action.

<script setup>
import { onUpdated } from 'vue'

onUpdated(() => {
  console.log("State has changed")
})
</script>

<template>
  <button></button>
</template>

unUnmounted

This hook is the opposite of onMounted, here, your custom code is run when the component is removed from the DOM tree. Most of the time, devs use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections.

<script setup>
import { onUnmounted } from 'vue'

onUnmounted(() => console.log("I run after I have been destroyed"))
</script>

onBeforeMount

Here, your custom code is run before the component gets mounted. The components reactive state would have been setup though.

<script setup>
import { onBeforeMount } from 'vue'

onBeforeMount(callbackFn)
</script>

onBeforeUpdate

Here, your code runs right before the code in the onUpdated hook runs. You can access the DOM state in here before it gets updated.

<script setup>
import { onBeforeUpdate } from 'vue'

onBeforeUpdate(callbackFn)
</script>

onBeforeUnmount

In this hook, your code runs right before the unMounted hook gets called.

<script setup>
import { onBeforeUnmount } from 'vue'

onBeforeUnmount(callbackFn)
</script>

onActivated

Your code in this hook is run when the component instance is inserted into the DOM tree, lets just say mounted. It’s similar to the onMounted hook, the only difference is that before this hook can be run, your component must be wrapped with the <KeepAlive> component which is used to cache components

<script setup>
import { onActivated } from 'vue'

onActivated(callbackFn)
</script>

onDeactivated

This is the opposite of the onActivated hook. The component must also be a child of the <KeepAlive> component. Your code runs when the component instance is removed from the DOM tree.

<script setup>
import { onDeactivated } from 'vue'

onDeactivated(callbackFn)
</script>

onServerPrefetch

This is a server side rendering hook. It runs before the components instance gets rendered on the server. onServerPrefetch only works if you activate SSR in your app.

<script setup>
import { onServerPrefetch } from 'vue'

onServerPrefetch(callbackFn)
</script>

All the hooks listed here are not all. I’m sure I missed some. To figure out the ones I missed head over to the Vue Js documentation, consider this an assignment.