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 的简述了，若是对您有帮助的话，能够点个👍。