How do you use the "keep-alive" element to cache and preserve component state?

In Vue.js, keep-alive is a highly useful built-in component that caches inactive component instances instead of destroying them. This preserves component state, reduces re-rendering time, and enhances application performance. Below, I will explain in detail how to use keep-alive to cache and preserve component state, with examples.

Basic Usage

When keep-alive wraps a dynamic component, it caches inactive instances, preserving the component's state so that it restores upon re-rendering.

html
<template>
  <keep-alive>
    <component :is="currentComponent"></component>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'UserProfile'
    };
  }
}
</script>

In this example, <keep-alive> wraps a dynamic component <component>. The currentComponent can be switched to different components as needed, and inactive components are cached by keep-alive.

Using include and exclude

The keep-alive component provides include and exclude attributes to specify which components should be cached or excluded.

html
<keep-alive :include="['UserProfile', 'UserSettings']">
  <component :is="currentComponent"></component>
</keep-alive>

Here, only UserProfile and UserSettings components are cached. If currentComponent is another component, these are not cached.

Lifecycle Hooks

When using keep-alive, components trigger two additional lifecycle hooks: activated and deactivated. This is particularly useful for managing logic that depends on component activation state.

javascript
export default {
  activated() {
    console.log('Component is activated');
  },
  deactivated() {
    console.log('Component is deactivated');
  }
}

Practical Application Example

Consider a SPA with a multi-step form. Users may navigate away and return later. Using keep-alive preserves the form's state, preventing input loss.

html
<template>
  <keep-alive>
    <form-component v-if="isFormVisible"></form-component>
  </keep-alive>
</template>

<script>
export default {
  data() {
    return {
      isFormVisible: true
    };
  }
}
</script>

Even if isFormVisible becomes false and the form is hidden, user input is preserved due to keep-alive. When isFormVisible is set back to true, the form restores its previous state.

Summary

By using keep-alive, Vue.js developers can conveniently cache components and preserve state, effectively improving user experience and application performance. It minimizes data re-loading and ensures smoother user interactions.