​

一.概念

也就是说kee-alive 是 Vue 内置的一个组件可以使被包含的组件保留状态或避免重新渲染 。也就是所谓的组件缓存 keep-alive 是 Vue 的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们
在平常开发中有部分组件没有必要多次初始化这时我们需要将组件进行持久化使组件的状态维持不变在下一次展示时也不会进行重新初始化组件。在组件切换过程中将状态保留在内存中防止重复渲染DOM减少加载时间及性能消耗提高用户体验性。

三.Props

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例
两个新的生命周期钩子
作用路由组件所独有的两个钩子用于捕获路由组件的激活状态。只适用于keep-alive

四. 生命周期

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

activated
路由组件被激活时触发。当进入缓存的路由组件时触发
使用 keep-alive 会将数据保留在内存中如果要在每次进入页面的时候获取最新的数据需要在 activated 阶段获取数据承担原来 created 钩子函数中获取数据的任务
你应该初始读取一次数据比如在created里面 而activated第一次创建页面时不会激活缓存之后第二次进入才会开始激活
// 当缓存组件被激活的时候执行

 activated(){
        this.userName = this.$route.query.id
    },

deactivated
路由组件失活时触发。当离开缓存的路由组件时触发

五.用法(两种方式)

1.根据条件缓存页面

// 所有路径匹配到的视图组件都会被缓存 
<keep-alive>
    <router-view></router-view>
</keep-alive>

// 只缓存组件name为aa或者bb的组件
<keep-alive include="aa,bb"> 
  <component />
</keep-alive>

// 组件name为cc的组件不缓存
<keep-alive exclude="cc"> 
  <component />
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include 下面的例子只缓存aa组件
<keep-alive include="aa,bb" exclude="bb"> 
  <component />
</keep-alive>

// 如果缓存的组件超过了max设定的值3那么将删除第一个缓存的组件
<keep-alive exclude="c" max="3"> 
  <component />
</keep-alive>

缺点需要知道组件的 name项目复杂的时候不是很好的选择

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: true // 需要缓存
        }
      },
      {
        path: 'user2',
        component: () => import('@/views/admin/user2'),
        name: 'User2',
        meta: {
          title: '用户管理2',
          keepAlive: false // 不需要缓存,默认不缓存可以不写
        }
      }
    ]
  }
]

App.vue

<template>
  <div id="app">
    <!-- <router-view/> -->
     <!-- 可以被缓存的视图组件 -->
     <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不可以被缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<style>
</style>

使用 router.meta 拓展

当然也可以通过动态设置route.meta的keepAlive属性来实现其他需求
首页是A页面
B页面跳转到AA页面需要缓存
C页面跳转到AA页面不需要被缓存
思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive

A的路由

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被缓存
    }
}

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时让 A 缓存即不刷新
        next();
    }
};

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存即刷新
        next();
    }
};

参考路由缓存前进后退刷新问题
​