Advanced VueJS: Build Better Applications Efficiently/

...

/

Activation/Deactivation Related Hooks

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.

Javascript (babel-node)
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:

HTML
<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 component is instead deactivated, triggering the hook. All ...