Keep alive in Vue

keep-alive
Keep-alive is an abstract component built into Vue that allows contained components to remain in state, avoiding repeated component creation and rendering
Keep-alive is generally used in combination with routing and dynamic components to cache components.

<keep-alive>
    <component :is='current'></component>
</keep-alive>

Keep-alive provides include and exclude attributes, both of which support strings or regular expressions. Include means that only components with matching names will be cached. Exclude means that any components with matching names will not be cached.

<keep-alive :include="includeList" :exclude="excludeList">
    <router-view></router-view>
</keep-alive>

Keep-alive caches include matching components and does not cache exclude matching components.


Read More: