Lifecycle Hooks

Lifecycle hooks allow for code to run at different stages of an applications lifecycle.

Lifecycle hooks need to be imported from vue -

import {onBeforeMount, onMounted, onBeforeUnmount, onUnmounted} from "vue"

Mounted Hooks

Code will run just before the component is loaded to the browser

onBeforeMount(() => {
  console.log("beforeMount")
})

Code will run when the component is loaded

onMounted(() => {
  console.log("onMounted")
})

Code will run just before the component is removed from the browser

onBeforeUnmount(() => {
  console.log("onBeforeUnmount")
})

Code will run after component has been removed from the browser

onUnmounted(() => {
  console.log("onUnmounted")
})

In order to use these hooks a 'keep alive' tag needs to be used in the main template where the router is used -

To achieve this replace this -

With this -

<router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

This hook will only run if the component is being actively kept alive

onActivated(() => {
  console.log("onActivated")
})

This hook will run when the component is no longer being kept alive

onDeactivated(() => {
  console.log("onDeactivated")
})

These hooks run whenever a component is updated.

This hook will run when a component is updated just before the change occurs on screen

onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})

This hook will run the moment a component is updated

onUpdated(() => {
  console.log('onUpdated')
})

Last modified: 23 September 2024