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

<!-- src/layouts/default/index.vue -->
<template>
    <el-container>
      <el-container>
        <el-header>
          <el-button @click="toList">列表页</el-button>
          <el-button @click="toDetail">详情页</el-button>
          <el-button @click="clearPinia">恢复KeepAlive</el-button>
        </el-header>
        <el-main>
          <!-- 子路由出口 -->
          <!-- <router-view /> -->
          <router-view v-slot="{ Component }">
            <keep-alive :include="includeArr" :exclude="excludeArr" :max="10">
              <component :is="Component" :key="$route.path" />
            </keep-alive>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </template>
  <script setup lang="ts">
  import { useRouter } from "vue-router"
  import { useKeepStore } from '@/views/stores/keepalive'
  const keepStoreData = useKeepStore()
  // 这里需要使用computed，否则清空excludeArr不起作用
  let includeArr = computed(()=>{
    return keepStoreData.includeArr
  })
  // 这里需要使用computed，否则清空excludeArr不起作用
  let excludeArr = computed(()=>{
    return keepStoreData.excludeArr
  })
  const router = useRouter()
  const toList = ()=>{
    keepStoreData.includeArr = []
    router.push({
      path: '/menu/keepalive'
    })
  }
  const toDetail = ()=>{
    keepStoreData.includeArr = []
    router.push({
      path: '/menu/keepalivesnow'
    })
  }
  const clearPinia = ()=>{
    keepStoreData.includeArr = ['keepalive','keepalivesnow']
  }
  </script>
  <style scoped lang="less">
  .el-container {
    height: 100vh;
  }
  .el-header {
    background-color: #B3C0D1;
    color: #ff0000;
  }
  .el-main {
    background-color: #E9EEF3;
  }
  </style>

<script setup lang="ts" name="keepalive">

<template>
  <div class="container">
    <div>keep-alive-list-列表页面</div>
    <div>
      <span>接口数据：</span>
      <span v-for="(item, index) in nameList" :key="index">{{ item }}</span>
    </div>
    <div class="keep-table">
      <el-table :data="tableData" style="width: 500px">
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <div class="keep-pagination">
      <el-pagination
        layout="prev, pager, next"
        v-model:current-page="currentPage"
        :page-size="1"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <div>
      <span>输入框：</span>
      <el-input v-model="KValue"></el-input>
    </div>
    <div>
      <!-- <router-link to='/menu/keepalivesnow'>
        <button>查看详情页keep-aliva-details</button>
      </router-link> -->
      <button @click="toList">查看详情页keep-aliva-details</button>
      <button @click="getTableList('add1')">获取表格数据</button>
    </div>
  </div>
</template>
<script setup lang="ts" name="keepalive">
import { useRouter } from "vue-router"
import { useKeepStore } from '@/views/stores/keepalive'
import { getCurrentInstance } from 'vue'
const router = useRouter()
let keepStoreData = useKeepStore()
const KValue = ref('')
// 跳转详情
const toList = ()=>{
    keepStoreData.includeArr = ['keepalive']
    router.push({
      path: '/menu/keepalivesnow'
    })
  }
// 表格
let tableData = ref([])
let total = ref(2)
let currentPage = ref(1)
const handleCurrentChange = (val:number)=>{
  console.log('81',val)
}
// 测试接口
let internalInstance = getCurrentInstance();
let Api = internalInstance && internalInstance.appContext.config.globalProperties.$api
let params = {}
let nameList = ref([])
let getTableList = (add:string)=>{
  Api.getVideoList(params).then((res: any)=>{
    nameList.value = res.payload || []
    tableData.value = res.payload.map((item:any)=>{
      return {
        name: item,
        address: add
      }
    })
  })
}
getTableList('add2')
// keep生命周期
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log('a-onActivated')
})
onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log('a-onDeactivated')
})
</script>
<style scoped lang="less">
.el-input{
  width: 300px;
}
.keep-table{
  display: flex;
  justify-content: center;
}
.keep-pagination{
  display: flex;
  justify-content: center;
}
</style>

<template>
  <div class="container">
    <div>keep-alive-snow-详情页面</div>
    <div>
      <span>输入框：</span>
      <el-input v-model="KValue"></el-input>
    </div>
    <div>
      <router-link to='/menu/keepalive'>
        <button>回到列表页keep-aliva-list</button>
      </router-link>
    </div>
  </div>
</template>
<script setup lang="ts" name="keepalivesnow">
const KValue = ref('')
onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  console.log('b-onActivated')
})
onDeactivated(() => {
  // 在从 DOM 上移除、进入缓存
  // 以及组件卸载时调用
  console.log('b-onDeactivated')
})
</script>
<style scoped lang="less">
.el-input{
  width: 300px;
}
</style>

问：vue3 keepalive使用详解
答：
Vue3 中的 keep-alive 组件是用于缓存动态组件的，可以在组件切换时保留组件的状态和避免重新渲染。下面是关于 Vue3 keep-alive 的使用详解：
基本使用
在需要缓存的组件外部包裹一个 <keep-alive> 标签，将需要缓存的组件放在其中：
<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>
缓存的组件生命周期钩子函数
当一个组件被缓存时，它的生命周期钩子函数会有所不同。具体如下：
activated: 缓存的组件被激活时调用，可以在这里执行一些需要在组件激活时执行的操作。
deactivated: 缓存的组件被停用时调用，可以在这里执行一些需要在组件停用时执行的操作。
<template>
  <keep-alive>
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </keep-alive>
</template>
在缓存的组件中添加 activated 和 deactivated 钩子函数：
<script>
export default {
  name: 'cached-component',
  activated() {
    console.log('cached-component activated')
  },
  deactivated() {
    console.log('cached-component deactivated')
  },
}
</script>
include 和 exclude 属性
include 和 exclude 属性可以用来控制 keep-alive 缓存哪些组件和排除哪些组件。它们都可以传递一个字符串或正则表达式的数组。
include：只有在 include 数组中的组件才会被缓存。
exclude：在 exclude 数组中的组件不会被缓存。
<template>
  <keep-alive include="home, about">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </keep-alive>
</template>
max 属性
max 属性用于设置缓存的最大组件数，当缓存的组件数量超过最大值时，最早缓存的组件会被销毁。
<template>
  <keep-alive max="10">
    <router-view v-slot="{ Component }">
      <component :is="Component" />
    </router-view>
  </keep-alive>
</template>