`<KeepAlive>`

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