Vue用keep-alive缓存组件

Posted 2022-04-17 空城机

keep-alive

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

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

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

实例

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

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

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

---

activated和deactivated

在Vue的生命周期当中，存在这样两个钩子activated和deactivated。这两个钩子与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 中还存在 include、exclude、max三种属性

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