Vue2.6：keep-alive 简述

简介

该文章主要是一个记录，会简单的介绍 Vue2.6 中 keep-alive 相关的内容

作用

keep-alive 主要是用于 Vue 组件的缓存，也就是当你需要频繁的在多个组件视图中进行切换的时候，你就可以考虑使用 keep-alive;
keep-alive 可以让组件保持存活，在二次乃至多次使用的时候，不需要重复去渲染，也就意味着不会走第二次 生命周期函数;
不过这也意味着，在没有特殊处理的情况下，被缓存的组件显示的数据始终是第一次加载时候的样子。

使用方法

keep-alive 的使用方法非常的简单，只需要使用 <keep-alive></keep-alive> 标签去包裹需要缓存的组件即可。
示例如下：

  // 组件缓存
  <keep-alive>
      <component :is="componentName" />
  </keep-alive>

  // 路由缓存
  <keep-alive>
      <router-view />
  </keep-alive>
...

生命周期函数

被 keep-alive 包裹的组件的生命周期是有区别于普通的组件。
被 keep-alive 包裹的组件中，会多出两个生命周期 activated、deactivated。
第一次进入被 keep-alive 包裹的组件中的时候会依次调用 beforeCreate -> created -> beforeMount -> mounted -> activated，其后的进入皆只会调用 activated，因为组件被缓存了，再次进入的时候，就不会走 创建、挂载 的流程了。
被 keep-alive 包裹的组件退出的时候就不会再执行 beforeDestroy、destroyed 了，因为组件不会真正意义上被销毁，相对应的组件退出的时候会执行 deactivated 作为替代。

activated

activated 会在组件进入(再次渲染)的时候被触发

deactivated

deactivated 会在组件离开(停用、移除)的时候被触发

配置

在使用中，特别是进行了路由缓存的时候，总归有些组件需要实时刷新不想让它进行缓存的，那么这里我们就可以用到 include、exclude 去进行匹配。
两种配置可以并行使用(同时使用)，需要注意的是 exclude 优先级是大于 include 的。

那么我们所有组件都进行缓存的时候，会占用很多的空间，我们可以使用 max 去制定缓存组件的最大数量，当超过最大数量的时候，那么最久远的组件缓存将被释放。

匹配规则：

1. 组件/路由的 name 配置;
2. 父组件中 components 的键值;

注意：匿名组件是无法进行匹配的。

include

顾名思义，匹配到的 组件 会被缓存， 可以使用 字符串(逗号分隔)、正则表达式、数组等方法进行匹配。
示例如下：

  // 字符串
  <keep-alive include="name1,name2">
      <router-view />
  </keep-alive>
  
  // 数组
  <keep-alive :include="/name1 | name2/">
    <router-view />
  </keep-alive>

  // 数组
  <keep-alive :include="['name1', 'name2']">
    <router-view />
  </keep-alive>

exclude

顾名思义，匹配到的 组件 不会被缓存， 可以使用 字符串(逗号分隔)、正则表达式、数组等方法进行匹配。
示例如下：

  // 字符串
  <keep-alive exclude="name1,name2">
      <router-view />
  </keep-alive>
  
  // 数组
  <keep-alive :exclude="/name1 | name2/">
    <router-view />
  </keep-alive>

  // 数组
  <keep-alive :exclude="['name1', 'name2']">
    <router-view />
  </keep-alive>

max

可缓存组件的最大数量，需要传入数字，可以是字符型和数值型的数据类型。
示例如下：

  // 字符串
  <keep-alive max="5">
    <router-view />
  </keep-alive>
  
  // 数值
  <keep-alive :max="5">
    <router-view />
  </keep-alive>

路由配置

在缓存路由的时候，也可以通过配置 meta 来判断路由是否需要缓存和不缓存 示例如下：

	...
    {
    	path: '/keep',
        name: 'Keep',
        component: Keep,
        meta: {
        	keepAlive: true // 缓存
        }
    }，
    {
    	path: '/alive',
        name: 'Alive',
        component: Alive,
        meta: {
        	keepAlive: false // 不缓存
        }
    }
    ...

结束

以上就是 keep-alive 的简述了，如果对您有帮助的话，可以点个?。