【再学前端】深入理解keep-alive

官方文档

是什么

keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 keep-alive 是 vue 内置的组件，用 keep-alive 包裹组件时，会缓存不活动的组件实例，而 不是销毁他们。 keep-alive 主要用于保存组件状态或避免重复创建重复渲染导致的性能问题。 keep-alive 可以设置以下props属性：

include - 字符串或正则表达式。include 白名单只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。exclude 黑名单任何匹配的组件都不会被缓存。
max - 数字。最多缓存多少个实例，一旦达到这个数字，新实例被创建之前，会销毁已缓存组件中最久没有被访问的实例。(了解一下LRU 算法）。

注意：include 和 exclude 首先检查组件的 name 属性，如果 name 不可用，则匹配局部注册名称。匿名组件不能被匹配。

特点

它是一个抽象组件， 自身不会渲染为一个 dom 元素，也不会出现在组件的父组件链中。
当组件在 keep-alive 内被切换，组件的 activated 和 deactivated 这两个生命周期钩子函数会被执行。组件一旦被 缓存， 再次渲染就不会执行 created、mounted 生命周期钩子函数。
1. activated 当组件被激活（使用）的时候触发可以简单理解为进入这个页面的时候触发
2. deactivated 当组件不被使用（inactive状态）的时候触发可以简单理解为离开这个页面的时候触发
要求同时只有一个子组件被渲染。
不会在函数式组件中正常工作，因为它们没有缓存实例。

使用场景

查看表格某条数据详情页，返回还是之前的状态，比如还是之前的筛选结果，还是之前的页数等。
填写的表单的内容路由跳转返回还在，比如input框、下选择拉框、开关切换等用户输入了一大把东西，跳转再回来不能清空啊，不用让用户再写一遍。
还有tab切换。

// 1 动态组件（所谓动态组件就是让多个组件使用同一个挂载点，并动态切换。）
<keep-alive>
    <component is="currentComponent"></component>
</keep-alive>
// 2 多个条件判断的子组件
<keep-alive>
    <comp-a v-if="true"></comp-a>
    <comp-b v-else></comp-b>
</keep-alive>
// 3 transition
<transition>
    <keep-alive>
        <component is="currentComponent"></component>
    </keep-alive>
</transition>
// 4 结合vue-router
<keep-alive>
  <router-view></router-view>
</keep-alive>

原理分析

https://vue3js.cn/interview/vue/keepalive.html#%E4%B8%89%E3%80%81%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90

组件通过插槽，获取第一个子节点。
根据 include、exclude 判断是否需要缓存，
通过组件的 key，判断是否命中缓存。
利用 LRU 算法，更新缓存以及对应的 keys 数组。
根据 max 控制缓存的最大组件数量。

Samgao0312 / Blog

【再学前端】深入理解keep-alive #143

是什么

特点

使用场景

原理分析

参考阅读