AI Features
Home
Courses
Advanced VueJS: Build Better Applications Efficiently

Activation/Deactivation Related Hooks

Learn and practice the two Vue lifecycle hooks related to component activation/deactivation—activated and deactivated.

We'll cover the following...

Not only can a component be mounted or unmounted, when wrapped in <keep-alive>, it also offers the activated and deactivated hooks. This lesson will only study the hooks, not the <keep-alive> component itself.

Adding the hooks

We can add these hooks in the same way as any other hook.

import { createApp } from 'vue'
createApp({
  el: '#app',
  // data() { ... },
  // computed: ...,
  // methods: ...,
  activated() {
    console.log('Hello from activated in app')
  },
  deactivated() {
    console.log('Hello from deactivated in app')
  }
})

We can also add these hooks in a single-file component, as shown below:

<template>
  <!-- ... -->
</template>
<script>
  export default {
    activated() {
      console.log('Hello from activated in component')
    },
    deactivated() {
      console.log('Hello from deactivated in component')
    }
  }
</script>

Understanding the activation and deactivation timing

A component is considered activated as soon as it’s mounted and all its children are activated. A component is kept alive from there on until its parent is destroyed. If something would lead to the destruction of the component, the ...