include - string | RegExp | Array：定义缓存白名单，只有名称匹配的组件会被缓存(2.1.0 版本后)。
exclude - string | RegExp | Array：定义缓存黑名单，任何名称匹配的组件都不会被缓存, 优先级大于include(2.1.0 版本后)。
max - number | string：最定义缓存组件上限，超出上限使用LRU的策略置换缓存数据。

在动态组件中的应用

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
    <component :is="currentComponent"></component>
</keep-alive>

不过此种方式并无太大的实用意义。

在vue-router中的应用

在vue2中，可以直接包裹

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

在vue3中，旧版的语法已经失效，新版官方推荐使用：

transition 和 keep-alive 现在必须通过 v-slot API 在 RouterView 内部使用：

<router-view v-slot="{ Component }">
    <transition>
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </transition>
</router-view>

keep-alive的生命周期

初次进入时：

触发 setup > beforeCreate > created > beforeMount > mounted > activated
退出后触发 deactivated

再次进入：

触发 beforeUpdate > updated > activated
退出后触发 deactivated

一般的组件，每一次加载都会有完整的生命周期，即生命周期里面对应的钩子函数都会被触发。

被keep-alive包裹的组件却不是这样，不再进入$mount过程，mounted之前的所有钩子函数（beforeCreate、created、mounted）都不再执行。它有自己独有的两个生命周期：

actived 当keep-alive包含的组件再次渲染的时候触发。
deactived 当keep-alive包含的组件销毁的时候触发

因此，在使用keep-alive时，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中。

三、keep-alive使用的注意事项

返回目录

include无效

检查版本

确定当前的vue版本的是2.1+, 因为include和exclude是vue2.1.0新增的两个属性.

查看 package.json

"vue": "^2.5.2",

检查name

注意, 不是 router.js 中的 name , 而是单个 vue 组件中的 name 属性.

建议将 router.js 中的 name 和 vue 组件的 name 保持一致, 不要混乱.

export default {
    name: "index"
}

多层嵌套

凡有超过两个以上的router-view且是父子级关系, 请都加上keep-alive, 只加一个不会生效.

// app.vue

// other.vue

总结

返回目录

与诸君共勉，为自己加油！

参考文档

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

db 的文档库由 db 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于 github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

Vue应用——关于keep-alive

前言

正文

一、keep-alive介绍

keep-alive是什么

使用场景

二、keep-alive的用法

keep-alive的三个参数