// <a href="https://vuejs.org/guide/built-ins/keep-alive.html">https://vuejs.org/guide/built-ins/keep-alive.html</a>
 is a built-in component that allows us to conditionally cache component instances
when dynamically switching between multiple components.
By default, an active component instance will be unmounted when switched away from.
This will cause any changed state it holds to be lost.
When this component is displayed again, a new instance will be created with only the initial state.
Creating fresh component instance on switch is normally useful behavior,
but in this case, we'd really like the two component instances to be preserved even when they are inactive.
To solve this problem, we can wrap our dynamic component with the built-in component
Lifecycle of Cached Instance
When a component instance is removed from the DOM but is part of a component tree cached by ,
it goes into a deactivated state instead of being unmounted.
When a component instance is inserted into the DOM as part of a cached tree, it is activated.
A kept-alive component can register lifecycle hooks for these two states using activated and deactivated hooks
Note that:
<ul>
<li>activated is also called on mount, and deactivated on unmount.</li>
<li>Both hooks work for not only the root component cached by ,
but also descendent components in the cached tree.</li>
</ul>

__my-solution

Useful in some specific cases, need to understand it thoroughly. Here is the document .…