vue 使用 keep-alive 进行组件缓存方法详解(组件不缓存问题解决)

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，下面这篇文章主要给大家介绍了关于 vue 使用 keep-alive 进行组件缓存方法(组件不缓存问题解决)的相关资料，需要的朋友可以参考下

一、使用场景

在 vue 开发过程中（单页面），有一些需求需要我们把页面状态保存下来。在切换页面时，页面不会进行重新加载。

keep-alive 主要用于保留组件状态或避免重新渲染，比如在动态组件中，为组件A和组件B分别设置了随机数编号，若在切换组件后又显示新的随机数体验极差，因此要用到 keep-alive
（常见于 tab 选项卡切换，并保留相关状态数据）

一般情况下，如果不做特殊处理，会重新执行 created 和 mounted 生命周期，从而重新加载页面，默认就显示到第一页去了，就很烦。

（我的问题是，使用 keep-alive 了，但组件仍然不缓存，下面会解决）

二、 认识下 keep-alive

1. <keep-alive></keep-alive> 是 Vue 提供的一个内置组件，keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

2. keep-alive 包裹的组件，其生命周期只能被执行一次，再次进入时不会被执行

3. keep-alive 包裹的组件，当组件在 keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行
   activated() 当 keep-alive 包含的组件被激活时调用（注：该钩子函数在服务器端渲染期间不被调用）
   deactivated() 当 keep-alive 包含的组件被停用时触发（注：该钩子在服务器端渲染期间不被调用）

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

4. keep-alive 组件有三个 props 属性：include、exclude 和 max，可以让 keep-alive 实现有条件的进行缓存。
   include - 字符串或正则表达式，只有名称匹配的组件会被缓存
   exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存（优先级高于 include）
   max - 数字，最多可以缓存多少组件实例

三、在组件中应用

//第一种：直接在组件外面套 keep-alive 组件A和组件B 内容都会被缓存
<keep-alive>
  <component :is="comName"></component>
</keep-alive>

//第二种：include 此时只有组件A内容会被缓存 若有多个可用逗号分隔 include="ReportA，ReportB"
<keep-alive include="ReportA">
   <component :is="comName"></component> 
</keep-alive>
  
//第三种：include+正则表达式或者数组 这种情况必须用 v-bind (:include="")
<keep-alive :include="['ReportA']">
   <component :is="comName"></component>
</keep-alive> 
  
//第四种：exclude 此时组件A内容不会被缓存，组件B内容会被缓存
<keep-alive exclude="ReportA">
   <component :is="comName"></component>
</keep-alive> 
  
  
//特殊情况：若 include 和 exclude 同时出现 exclude 的优先级是高于 include 的此时只缓存组件B
<keep-alive include="ReportA,ReportB" exclude="ReportA">
   <component :is="comName"></component>
</keep-alive> 
// 如果缓存的组件超过了 max 设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5">
   <component />
</keep-alive>

参考链接：https://www.jb51.net/article/263316.htm

四、解决组件不缓存问题

我写了两个组件，一个房态的，一个列表，需要动态切换。
组件切换没问题，但每次都要加载 created 和 mounted 生命周期。 （我搜索了下原因，都没用，后来又看了遍代码，突然发现问题）

原因： 主要是引入的组件，export default{ } 默认输出，忘写名字。

下面是代码分享

主页面

//主页面
<template>
      <keep-alive include="ReportA,ReportB">
        <component :is="comName" > </component>
      </keep-alive>
</template>
<script>
import ReportA from './components/reportA.vue'
import ReportB from './components/reportB.vue'
export default {
  components: {
    ReportA,
    ReportB,
  },
}
</script>

子页面

<script>
export default {
  name: 'ReportA',    //需要默认输出的名字（两个页面都要）
}
</script>

五、keep-alive配合router使用

首先在 router 中为路由页面添加 meta 属性：

 {
   path: '/tab',
   name: 'tab',
   meta:{
     keepAlive:true   //需要缓存
   },
   component: () => import('../views/Tab.vue')
 },
 {
   path: '/banner',
   name: 'banner',
   meta:{
     keepAlive:false   //不需要缓存
   },
   component: () => import('../views/Banner.vue')
 }

然后在App.vue中添加判断：

//此处是为添加了 keepAlive=true 的路由添加缓存
 <keep-alive>
    <router-view v-if="$route.meta.keepAlive"/>   
 </keep-alive>
 
//此处是为添加了 keepAlive=false 的路由默认不缓存
  <router-view v-if="!$route.meta.keepAlive"/>