吐血整理 ＜ keep-alive ＞ 知识，包括使用方法，缓存机制，史上最全

keep-alive

作用

在组件进行切换的时候，保留缓存

Props

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例

生命周期

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

1. activated

​ 在 keep-alive 组件激活时调用

​ 使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务

2.deactivated

*注意：* 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用

实现方式

1. 无条件的全局应用

在 vue 的根组件中，使用 标签包裹

2. 有条件的缓存

3. 结合路由进行缓存

//在 router 目录下的 index.js 文件里
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '@/layout'
export default new Router = [
  {
    path: '/admin',
    component: Layout,
    redirect: '/admin/user',
    alwaysShow: true, 
    name: 'Admin',
    meta: {
      title: '系统管理',
      icon: 'documentation'
    },
    children: [
      {
        path: 'user',
        component: () => import('@/views/admin/user'),
        name: 'User',
        meta: {
          title: '用户管理',
          keepAlive: false // 不需要缓存
        }
      }
    ]
  }
]

//app.vue

钩子函数与 keep-alive 的关系

1. created 和 destoryed

   • created，会创建一个 cache 对象，用来作为保存缓存的容器，保存 vnode 节点
   • destoryed 会在组件被销毁的时候，清除 cache 缓存中所有的组件实例

2. render 钩子函数

   首先他会获取到插槽中的内容

   调用 getFirstComponentChild 方法获取第一个子组件，获取到该组件的 name

   根据拿到的 name ，与传入的 include 和 exclude 进行匹配，匹配成功表示需要缓存，不成功则不需要，直接返回这个组件的 vnode

   • 缓存机制：

     • 用拿到的 name 去 this.cache 中匹配，如果未找到此 name，则代表这个组件还没有被缓存过，这也就是为什么页面添加 后，第一次进入页面会请求数据的原因

     • 以组件的key 为键，将key存入this.key，再判断 this.key 中缓存的组件数量是否超过 传入的 max ，如果超过则将第一个组件删除掉

     • 补充：这其实应用了一个缓存淘汰策略LRU

       

3. mounted 钩子函数

   • 用来观察传入的 include 和 exclude 是否发生变化

❔ 问题一：为什么添加 keep-alive 后，缓存就不会被清除而被保存下来呢

answer：因为 destoryed 这个钩子函数的作用是清除缓存中的所有实例对象，但是使用后，将不执行 beforedestoryed 和 destoryed 两个函数，使用了 deactivated 进行替代，将组件变为不活跃的状态，而不是从 dom树直接移除

❔ 问题二：vue2 和 vue3 使用区别

answer：

vue3

1. 基本写法

2. 条件缓存

// 路由配置
{
  path: 'test',
  name: 'Test',
  component: () => import('@/views/Test'),
  meta: {
    keepAlive: true, // 组件需要缓存
  }
},

史上最全是开玩笑的，这篇文章这是我的一知半解，希望能给大家提供一点帮助，发现问题欢迎大家指正