vue内置组件：keep-alive

keep-alive的作用

KeepAlive 通过缓存管理和特殊的挂载/卸载逻辑以达到减小同一个组件频繁的创建、销毁造成的性能开销的目的

应用场景

keep-alive能够缓存组件的状态，当组件被激活时，渲染被保存的状态。因此，可以用于tab切换，在一个tab中填写信息后，切换到另一个tab组件然后在返回到上一个组件时仍然显示填写的信息便于修改与查看。

keep-alive缓存所有组件

 <router-view v-slot="{Component}">
    <keep-alive>
      <component :is="Component">component>
    keep-alive>
 router-view>
1
2
3
4
5

这样在路由中的所有组件都将被缓存，但是大多数情况是只有部分组件需要缓存，其他组件并不需要，因此需要动态设置需要缓存的组件

keep-alive动态设置缓存的组件

include

显式地配置应该被缓存组件
include可以是一个正则表达式、以逗号分隔的字符串或者包含这两种类型的数组。

在KeepAlive 组件被挂载时，它会根据“内部组件”的名称（即 name 选项）进行匹配

 <router-view v-slot="{Component}">
    <keep-alive :include="/^keep/g">
      <component :is="Component">component>
    keep-alive>
 router-view>
 
  <router-view v-slot="{Component}">
    <keep-alive :include="['keepTab', 'keepTabItem']">
      <component :is="Component">component>
    keep-alive>
 router-view>
 
<router-view v-slot="{Component}">
    <keep-alive include="keepTab, keepTabItem">
      <component :is="Component">component>
    keep-alive>
 router-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样就能缓存所有name属性值以keep开头的组件

exclude

显式地配置不应该被缓存组件
exclude可以是一个正则表达式、以逗号分隔的字符串或者包含这两种类型的数组。

在KeepAlive 组件被挂载时，它会根据“内部组件”的名称（即 name 选项）进行匹配

<router-view v-slot="{Component}">
    <keep-alive :exclude="/^keep/g">
      <component :is="Component">component>
    keep-alive>
 router-view>
 
 <router-view v-slot="{Component}">
    <keep-alive :exclude="['keepTab', 'keepTabItem']">
      <component :is="Component">component>
    keep-alive>
 router-view>
  
<router-view v-slot="{Component}">
    <keep-alive exclude="keepTab, keepTabItem">
      <component :is="Component">component>
    keep-alive>
 router-view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样组件的name属性值是以keep开头的组件就不会被缓存

缓存管理

缓存的处理逻辑可以总结为：

• 如果缓存存在，则继承组件实例，并将用于描述组件的 vnode 对象标记为keptAlive，这样渲染器就不会重新创建新的组件实例
• 如果缓存不存在，则设置缓存

缓存修剪

当缓存不存在的时候，总是会设置新的缓存。这会导致缓存不断增加，极端情况下会占用大量内存。因此，需要限制缓存的数量，并当达到限制数量时，对缓存进行修剪，称之为缓存修剪。

设置缓存的数量可以通过keepalive组件的max属性设置。

修剪策略是把当前访问（或渲染）的组件作为最新一次渲染的组件，并且该组件在缓存修剪过程中始终是安全的，即不会被修剪。

修剪策略还可以通过keepalive组件的cache属性进行自定义。

keep-alive缓存组件的时机

是进入组件时缓存，还是离开组件时缓存，当进入时将缓存设置为true，在离开时设置为false是否会缓存

keep-alive生命周期函数的触发时机

生命周期与组件生命周期、路由导航守卫触发的顺序

实现原理

将被 KeepAlive 的组件从原容器搬运到另外一个隐藏的容器中，实现“假卸载”。

当被搬运到隐藏容器中的组件需要再次被“挂载”时，把该组件从隐藏容器中再搬运到原容器。

这个过程对应到组件的生命周期，其实就是 activated 和 deactivated。

KeepAlive 组件本身并不会渲染额外的内容，它的渲染函数最终只返回需要被 KeepAlive 的组件，这个需要被 KeepAlive 的组件被称为“内部组件”。

KeepAlive 组件会对“内部组件”进行操作，主要是在“内部组件”的 vnode 对象上添加一些标记属性，以便渲染器能够据此执行特定的逻辑。