The <keep-alive> component in Vue.js serves to cache inactive component instances instead of destroying them when they are switched out. This mechanism is beneficial for performence optimization, particularly in scenarios involving frequent component transitions.

Props

• include: Accepts a string, regular expression, or an array of strings. Only components whose names match the provided pattern will be cached.
• exclude: Accepts a string, regular expression, or an array of strings. Any component whose name matches the provided pattern will not be cached.
• max: A number specifying the maximum number of component instances to cache. When this limit is reached, the least recently accessed cached instance will be destroyed to make room for a new one.

When a component is toggled within <keep-alive>, its activated and deactivated lifecycle hooks are trigggered accordingly.

Usage

Basic Implementation

<keep-alive>
  <component :is="currentView"></component>
</keep-alive>

Conditional Rendering

<keep-alive> is intended for use when a single, direct child component is being toggled. It does not function correctly with v-for. If multiple conditional child elements are present, <keep-alive> requires that only one is rendered at any given time.

<keep-alive>
  <component-a v-if="showA"></component-a>
  <component-b v-else></component-b>
</keep-alive>

With Transitions

<keep-alive> can be combined with the <transition> component:

<transition>
  <keep-alive>
    <component :is="currentView"></component>
  </keep-alive>
</transition>

Conditional Caching with include and exclude

Introduced in Vue 2.1.0, the include and exclude props allow for fine-grained control over which components are cached. These props can be configured using a comma-delimited string, a regular expression, or an array.

<!-- Using a comma-delimited string -->
<keep-alive include="ComponentA,ComponentB">
  <component :is="currentView"></component>
</keep-alive>

<!-- Using a regular expression (with v-bind) -->
<keep-alive :include="/ComponentA|ComponentB/">
  <component :is="currentView"></component>
</keep-alive>

<!-- Using an array (with v-bind) -->
<keep-alive :include="['ComponentA', 'ComponentB']">
  <component :is="currentView"></component>
</keep-alive>

Matching is performed first against the component's name option. If a name option is not available, Vue falls back to matching the component's locally registered name (the key in the parent's components option). Anonymous components cannot be matched.

Limiting Cache Size with max

Introduced in Vue 2.5.0, the max prop limits the number of cached component instances. When the cache reaches its maximum capacity, the least recently accessed component instance is evicted before a new one is created.

<keep-alive :max="10">
  <component :is="currentView"></component>
</keep-alive>

It's important to note that <keep-alive> does not function correctly with functional components, as they are stateless and not meant for instance caching.