`<KeepAlive>`
Explore how to use Vue's KeepAlive component to cache component instances, preserving their state and improving performance. Understand how to use include, exclude, and max props to control caching behavior, and learn about the activated and deactivated lifecycle hooks for managing component reuse effectively.
We'll cover the following...
Every time a component is rendered or mounted, Vue creates a new instance of this component. In most cases, we want this behavior—there’s no need to cache titles, static text, or entire pages of static content. Doing so would mean that Vue stores them in memory, even though they’re not in use.
Sometimes though, cached components are helpful. They keep their state and need minimal setup time to be remounted by Vue. We can cache components by using <keep-alive>.
What does <keep-alive> do?
Vue tends to remove any unused components from memory by default. The more that is happening on a page, the more components Vue needs to render. To keep performance optimal, Vue tries to keep the memory footprint minimal. The main drawback is that a switch between components through, for example, routing, requires the component to be completely setup all over ...