Search⌘ K
AI Features
Home
Courses
Advanced VueJS: Build Better Applications Efficiently

Activation/Deactivation Related Hooks

Explore how Vue's activated and deactivated lifecycle hooks work with keep-alive components. Understand their timing, use cases, and how they can replace common mounting and destruction hooks. This lesson helps you manage component state efficiently, especially in single-page applications, and optimize resource usage by attaching and detaching resources like listeners and intervals effectively.

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 ...