0
点赞
收藏
分享

微信扫一扫

这一次,彻底搞懂Vue中的keep-alive

小桥流水2016 2022-04-13 阅读 55
前端vue.js

keep-alive的使用场景及其特点

  1. 用于Vue性能优化。
  2. 缓存组件。
  3. 频繁切换,不需要重复渲染。
  4. keep-alive有include和exclude属性,这两个属性决定了哪些组件可以进入缓存。
  5. keep-alive还有一个max属性,通过它可以设置最大缓存数,当缓存的实例超过max的时候,vue会删除最久没有使用的缓存,属于LRU缓存策略。
  6. keep-alive其内部所有嵌套的组件都具有两个生命周期钩子函数,分别是activated和deactivated,它们分别在组件激活和失活的时候触发。
<keep-alive>
    <KeepaliveA v-if="state === 'A' " />
    <KeepaliveB v-if="state === 'B' "/>
    <KeepaliveC v-if="state === 'C' "/>
</keep-alive>

keep-alive的原理?

keep-alive如何根据不同场景来更新数据?

举报

相关推荐

0 条评论