Keep-alive

• a powerful tool for optimizing the performance of applications by caching and preserving the state of dynamically created and destroyed components

Basic implementation

    <KeepAlive>
    <component :is="activeComponent" />
    </KeepAlive>

• in this case, we could preserve the data even though we switch between the components

Include and exclude\

<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

• You can specify which components to cache or exclude from caching by using the include and exclude attributes. This provides flexibility in managing which components benefit from caching.

Hooks

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // called on initial mount
  // and every time it is re-inserted from the cache
})

onDeactivated(() => {
  // called when removed from the DOM into the cache
  // and also when unmounted
})
</script>

• perform custom logic when a cached component is activated or deactivated.

Max usage

    <KeepAlive :max="10">
    <component :is="activeComponent" />
    </KeepAlive>

• limit the number of components cached by setting the "max" attribute.

• helps manage memory usage