Vue用keep-alive缓存组件

Posted 空城机

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue用keep-alive缓存组件相关的知识,希望对你有一定的参考价值。

keep-alive

用途:对于动态切换的组件进行包裹,使其能够进行缓存,而不是销毁掉后重新创建

在系统开发中,界面上有时会需要对某一块内容进行切换,如果这一部分的内容是几个组件频繁动态切换,为了提高效率,可以使用keep-alive包裹它们。

keep-alive是一个抽象组件,本身不会渲染一个DOM元素,也不会出现在组件的组件链中。(这与transition动画组件类似)

实例

<template>
    <div class='keepAlives'>
        <keep-alive></keep-alive>
    </div>
</template>

虽然在代码中存在<keep-alive>,但是当打印this时,children中是不存在任何子组件的

如果引入一个普通子组件,children中会有的


activateddeactivated

Vue的生命周期当中,存在这样两个钩子activateddeactivated。这两个钩子与mounted钩子等不同,它们只为了keep-alive服务,如果vue组件中没有使用keep-alive,就不会被触发。

activated() 
    console.log('111加载缓存')
,
<button @click="state = 'a'" >111</button>
<br/>
<button @click="state = 'b'" >222</button>
<hr />
<br/>

<keep-alive>
    <keepAliveState1 v-if="state === 'a'"></keepAliveState1>
    <keepAliveState2 v-if="state === 'b'"></keepAliveState2>
</keep-alive>

效果:


比较

如果不使用keep-alive,子组件会发生什么操作? 被切换掉的组件会进行destroy销毁

mounted() 
    console.log('1111组件mounted');
,
destroyed() 
    console.log('111组件destroyed');
,
  • 不使用keep-alive
<keepAliveState1 v-if="state === 'a'"></keepAliveState1>
<keepAliveState2 v-if="state === 'b'"></keepAliveState2>

  • 使用keep-alive

可以看到,在keep-alive中的组件只会mounted加载一次,并且切换后也没有销毁,这样就是缓存了


属性

keep-alive 中还存在 includeexcludemax三种属性

  • include可以选择需要缓存的组件
  • exclude可以排除不需要缓存的组件
  • max限制最大缓存数量,如果已缓存的组件超过max,就像队列一样,先进先出,最先缓存的组件被销毁

只缓存1和3

keepArr: ['keepAliveState1', 'keepAliveState3']
<keep-alive :include="keepArr">
    <keepAliveState1 v-if="state === 'a'"></keepAliveState1>
    <keepAliveState2 v-if="state === 'b'"></keepAliveState2>
    <keepAliveState3 v-if="state === 'c'"></keepAliveState3>
</keep-alive>

动态组件

上面举的例子,切换组件如果多时,可以使用动态组件的写法

  • :is = "component-name" 用法
  • 需要根据数据,动态渲染的场景。 即组件类型不确定
<button @click="state = 'keepAliveState1'" >111</button>
<br/>
<button @click="state = 'keepAliveState2'" >222</button>
<br/>
<button @click="state = 'keepAliveState3'" >333</button>

<hr />
<br/>

<keep-alive>
    <component :is="state"></component>
</keep-alive>

以上是关于Vue用keep-alive缓存组件的主要内容,如果未能解决你的问题,请参考以下文章

[vue3进阶] 8.keepAlive

Vue中使用keep-alive优化网页性能

vue中keep-alive的作用

Vue中keep-alive原理

Vue 怎么缓存当前的组件?缓存后怎么更新?说说你对keep-alive的理解是啥

Vue 中keep-alive组件将会被缓存