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