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>
Logo

前往低代码交流专区

更多推荐