vue3使用KeepAlive组件及一些注意事项

目录

一、KeepAlive的作用

二、缓存组件配置

2.1、过滤缓存组件

2.2、最大缓存实例数

三、KeepAlive组件的生命周期

四、错误用法

4.1、缓存v-if包裹的动态组件

4.2、拼写错误

---

一、KeepAlive组件的作用

        首先，keep-alive是一个vue的内置组件，官网文档：vue.js - KeepAlive。我们在编写vue代码时，是可以直接<KeepAlive></KeepAlive>组件化调用的。

        KeepAlive多用于切换tab页或跳转、改变页面时候，缓存旧页面，以达到使用浏览器后退或返回功能回到旧页面时候，依旧可以保留跳转前的页面值。

二、缓存组件配置

2.1、缓存过滤

        在<KeepAlive></KeepAlive>中，被包裹的组件将会被缓存，默认缓存包裹的所有实例。当然可以根据事情情况选择特定选择实例进行缓存，这样也有助提供响应速度。

// include和exclude 其值可以是字符串，数组、正则表达式，除字符串外，其余类型得使用:include或:exclude<KeepAlive include="" exclude=""><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>

2.2、最大缓存实例数

        这块设置用来限制组件缓存的最大实例数，当缓存的实例数超过指定的最大缓存数后，vue自动将最久没有被访问的实例数的缓存删除，用来添加新的缓存实例。

// 使用prop :max指定<KeepAlive :max="20"><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>

 

三、KeepAlive组件的生命周期

        activated 和 deactivated 生命周期可以用来处理一些回调逻辑。

四、错误用法

        在使用KeepAlive时，有几个注意点，要不然会没有缓存效果。

4.1、缓存v-if包裹的动态组件

// 因为v-if会在dom中移除（KeepAlive会不起作用） -->
<template v-if="routeName === key"><KeepAlive><component :is="currentTab"/></KeepAlive>
</template>// 改用v-show
<KeepAlive><component :is="currentTab" v-show="routeName === key" />
</KeepAlive>

4.2、拼写错误

        在template块里得使用KeepAlive，若使用keep-alive的话会不起作用，亲测。