0
点赞
收藏
分享

微信扫一扫

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

杰克逊爱学习 2021-09-30 阅读 40
web 前端

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

举报

相关推荐

0 条评论