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实现原理
本文地址:https://blog.csdn.net/express_yourself/article/details/109369744