keep-alive是什么

• keep-alive用于保存组件的渲染状态。
• keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，避免组件反复创建和渲染。

应用场景

在动态组件中的应用

例如：点击事件，切换不同的子组件

<button @click="state ='A'">A</button>
<button @click="state ='B'">B</button>
<button @click="state ='C'">C</button>
<KeepAliveA v-if="state ==='A'"/>
<KeepAliveB v-if="state ==='B'"/>
<KeepAliveC v-if="state ==='C'"/>

缺点：

通过缓存组件实现

<button @click="state ='A'">A</button>
<button @click="state ='B'">B</button>
<button @click="state ='C'">C</button>
<keep-alive>
    <KeepAliveA v-if="state ==='A'"/>
    <KeepAliveB v-if="state ==='B'"/>
    <KeepAliveC v-if="state ==='C'"/>
</keep-alive>

关于keep-alive的实现原理，可参考文章：