vue3-ts：keepalive 列表页到详情，详情回到列表，列表恢复离开时的状态

一、KeepAlive简介

技术栈：vue3 + ts + pinia

 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

keepalive组件总共有三个参数

include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存

exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存

max：可传数字，限制缓存组件的最大数量,默认为10

include包含的 && 排除exclude包含的 就是需要缓存的组件

二、使用场景

在列表页面 点击查看 路由到详情页面
详情页面点击返回，希望回到当时从列表页面离开时的样子
（因为列表页经过了tab切换，表单查询，分页查询等操作，如果回到列表页是一个初始的状态，那么需要重新操作这一系列动作）

三、全局实现keepalive

3.1、App.vue

3.2、src/views/keepaliva/index.vue

3.3、src/views/keepaliva/snow.vue

至此，简单的keepalive demo已实现。生产项目使用肯定不能这么暴力，本文继续介绍其他内容以满足生产使用。

四、router配置缓存

4.1、App.vue

4.2、src/routers/index.vue

{
    path: '/keepalive', // keepalive
    component: ()=>import('../views/keepalive/index.vue'),
    meta: {
      keepAlive: true // 该页面需要keepAlive
    }
  },
  {
    path: '/keepalive-snow', // keepalive
    component: ()=>import('../views/keepalive/snow.vue'),
    meta: {
      keepAlive: true // 该页面需要keepAlive
    }
  },

4.3、src/views/keepaliva/index.vue

4.4、src/views/keepaliva/snow.vue

五、layouts配置keepalive--router配置

5.1、src/routers/index.vue

  {
    path: '/menu', // keepalive
    component: layout_menu,
    name: 'menu',
    children: [
      {
        path: 'keepalive',
        component: ()=>import('../views/keepalive/index.vue'),
        name: 'keepalive',
        meta: {
          keepAlive: true // 该页面需要keepAlive
        }
      }
    ],
    meta: {
      keepAlive: true // 该页面需要keepAlive
    }
  },
  {
    path: '/menu', // keepalive
    component: layout_menu,
    name: 'menu2',
    children: [
      {
        path: 'keepalivesnow',
        component: ()=>import('../views/keepalive/snow.vue'),
        name: 'keepalivesnow',
        meta: {
          keepAlive: true // 该页面需要keepAlive
        }
      }
    ],
    meta: {
      keepAlive: true // 该页面需要keepAlive
    }
  },

5.2、layouts/menu/index.vue

六、layouts配置keepalive--组件配置--推荐方法

本方法实现在layout文件配置keepalive，思路与方法满足生产环境使用。
点击菜单时候清空所有缓存的组件，点击查看时候缓存对应的组件，满足spa单页面项目生产使用。
实现在列表页经过一系列操作后，点查看到详情页，点返回回到列表页--列表页恢复离开时的状态，点击菜单恢复到没有缓存的页面展示最新的数据。推荐使用。

6.1、参数介绍

include：可传字符串、正则表达式、数组，名称匹配成功的组件会被缓存

exclude：可传字符串、正则表达式、数组，名称匹配成功的组件不会被缓存

max：可传数字，限制缓存组件的最大数量,默认为10

include包含的 && 排除exclude包含的 就是需要缓存的组件

6.2、layouts/menu/index.vue

6.3、 设置name

6.3.1安装插件

vite-plugin-vue-setup-extend

6.3.2、vite.config.ts 

引入插件

import VueSetupExtend from 'vite-plugin-vue-setup-extend'

使用插件

plugins: [vue(),VueSetupExtend()],

6.3.3、页面使用

6.6、src/views/keepaliva/snow.vue

6.7、页面测试 name为keepalive的组件已被缓存，点击菜单清除缓存获取最新数据，测试成功。

七、onActivated、onDeactivated

onActivated：进入页面

onDeactivated：离开页面

八、C知道

问：vue3 keepalive使用详解

答：
Vue3 中的 keep-alive 组件是用于缓存动态组件的，可以在组件切换时保留组件的状态和避免重新渲染。下面是关于 Vue3 keep-alive 的使用详解：

基本使用
在需要缓存的组件外部包裹一个  标签，将需要缓存的组件放在其中：


缓存的组件生命周期钩子函数
当一个组件被缓存时，它的生命周期钩子函数会有所不同。具体如下：

activated: 缓存的组件被激活时调用，可以在这里执行一些需要在组件激活时执行的操作。
deactivated: 缓存的组件被停用时调用，可以在这里执行一些需要在组件停用时执行的操作。


在缓存的组件中添加 activated 和 deactivated 钩子函数：


include 和 exclude 属性
include 和 exclude 属性可以用来控制 keep-alive 缓存哪些组件和排除哪些组件。它们都可以传递一个字符串或正则表达式的数组。

include：只有在 include 数组中的组件才会被缓存。
exclude：在 exclude 数组中的组件不会被缓存。


max 属性
max 属性用于设置缓存的最大组件数，当缓存的组件数量超过最大值时，最早缓存的组件会被销毁。

相关内容

1、通过url记录列表页的关键信息，查询条件、分页等

2、通过sessionStorage记录列表页的关键信息，查询条件、分页等

session只能在同一个页面起作用，所以复制一个链接打开后，对原来正常的操作的页面没有影响

3、keepalive--本文

过程记录

记录一、

Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function

 解决：

参考链接：

vue3中一些简单的小技巧_vite-plugin-vue-setup-extend_还一激灵的博客-CSDN博客

vue3 keep-alive 页面切换不触发onActivated和onDeactivated方法周期_vue3 onactivated_凯扣叮~的博客-CSDN博客

学习Vue3 第二十章（keep-alive缓存组件）_keep-live vue3 activated_小满zs的博客-CSDN博客

Vue3知识点_onactivated_阿信呐的博客-CSDN博客

如何在vue3的jsx中使用keep-alive？ - 知乎

https://ask.csdn.net/questions/7727011

https://www.cnblogs.com/lyt0207/p/16543867.html

Vue3 keep-alive 缓存问题_ZL随心的博客-CSDN博客

https://www.cnblogs.com/aehyok/p/16328765.html

https://free_pan.gitee.io/router-tabs-wk/

vue3基于Element Plus和vue-router实现选项卡-多标签组件_哔哩哔哩_bilibili

【VUE面试题】vue2和vue3中使用keep-alive的区别_哔哩哔哩_bilibili

vue3的keep-alive组件使用详解(包含手动控制缓存清除)_哔哩哔哩_bilibili