Vue高级特性「八」--keep-alive 缓存组件 ***

keep-alive是什么

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

应用场景

频繁切换，不需要重复渲染(tab切换)，如果标签简单可以使用 v-show
Vue性能优化方法之一

在动态组件中的应用

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

<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'"/>

缺点：

v-if可以根据条件销毁和重新渲染组件;每次切换都会触发另外元素的销毁和重新渲染

通过缓存组件实现

<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的实现原理，可参考文章：

keep-alive实现原理