vue3手动删除keepAlive缓存的方法

 <router-view v-slot="{ Component }">
    <keep-alive >
      <component :is="Component" :key="$route.path"/>
    </keep-alive>
  </router-view>

{
      path: '/el/cascader/:id',
      name: 'ElCascaderDemo2',
      component: () => import('../views/ElCascaderDemo.vue')
    },

<script setup lang="ts">
 import { useRouter } from 'vue-router'
 const router = useRouter()
  const go = (id: number) => {
    router.push({
      path: '/el/cascader/' + id
    })
  }
</script>

<template>
  <main>
    <div v-for="i in 10000" @click="go(i)" class="item">
      {{  i  }}
    </div>
  </main>
</template>

const cacheSubtree = () => {
      if (pendingCacheKey != null) {
        cache.set(pendingCacheKey, getInnerChild(instance.subTree));
      }
    };
    onMounted(cacheSubtree);
    onUpdated(cacheSubtree);

<router-view v-slot="{ Component }">
    <keep-alive :max="10">
      <component :is="Component" :key="$route.path"/>
    </keep-alive>
  </router-view>

 <router-view v-slot="{ Component }">
    <keep-alive :max="10">
      <component :is="formatComponentInstance(Component, $route?.path)" :key="$route.path"/>
    </keep-alive>
  </router-view>
  
  
let wrapperMap = new Map()
const formatComponentInstance = (component : Component, path:string ) => {
  let wrapper
  if (wrapperMap.has(path)) {
    wrapper = wrapperMap.get(path)
  } else {
    wrapper = {
      name: path,
      render(){
        return h(component) // h的第一个参数可以是字符串，也可以是一个组件定义；h返回的是一个虚拟dom
      }
    }
    wrapperMap.set(path, wrapper)
  }
  return h(wrapper)
}

<template>
    <el-tag
      v-for="item in editableTabs"
      :key="item.key"
      closable
      :disable-transitions="false"
      @click="tabChange(item.key)"
      @close="handleTabsEdit(item.key, 'remove', undefined)"
      :type="editableKey === item.key ? 'primary':'info'"
    >
      {{ item.title }}
    </el-tag>
  </template>
  <script lang="ts" setup>
  import { ref, watch } from 'vue'
  import type { Ref } from 'vue'
  import { ElTag} from 'element-plus'
  import { useRoute, useRouter} from 'vue-router'
  const route = useRoute()
  const router = useRouter()
  import { useKeepAlive } from '../stores/index'

  let tabIndex = 1
  const editableKey = ref('')
  const editableTabs : Ref<Array<{[key: string]: any}>> = ref([])
  
  const visitedRoute: String [] = []
  watch(() => route.path, (val) => {
    if (visitedRoute.indexOf(val) === -1) {
        visitedRoute.push(val)
        handleTabsEdit(undefined, 'add', val)
    } else {
      editableKey.value = editableTabs.value.filter((tab) => tab.title === val)[0].key
    }
  })
  
  const handleTabsEdit = (
    targetKey: string | undefined,
    action: 'remove' | 'add',
    newTabTitle: string | undefined
  ) => { 
    if (action === 'add') {
      const newTabName = `${++tabIndex}`
      editableTabs.value.push({
        title: newTabTitle,
        key: newTabName,
      })
      editableKey.value = newTabName
    } else if (action === 'remove') {
      const tabs = editableTabs.value
      let activeKey = editableKey.value
      if (activeKey === targetKey) {
        tabs.forEach((tab, index) => {
          if (tab.key === targetKey) {
            //  同步删除visitedRoute数组
            let includeIndex = visitedRoute.indexOf(tab.title)
            visitedRoute.splice(includeIndex, 1)
            //    重置active tab
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeKey = nextTab.name
              router.push({
                path: nextTab.title
              })
            }
            // /页签关闭时，重置store中的exclude数组，如['/el/cascader/2']
            const keepAliveStore = useKeepAlive()
              let exclude: string[] = [tab.title]
              keepAliveStore.setExclude(exclude)
          }
        })
      }
  
      editableKey.value = activeKey
      editableTabs.value = tabs.filter((tab) => tab.key !== targetKey)
    }
  }

  const tabChange  = (activeKey: string) => {
    let path = editableTabs.value.filter((tab) => tab.key === activeKey)[0].title
    router.push({
        path
    })
  }
  </script>
  
  

const keepAliveStore = useKeepAlive()
const excludes = computed(() => {
  return keepAliveStore.exclude
})

<router-view v-slot="{ Component }">
    <keep-alive :max="10" :exclude="excludes">
      <component :is="formatComponentInstance(Component, $route?.path)" :key="$route.path"/>
    </keep-alive>
  </router-view>

const formatComponentInstance = (component : Component, path:string ) => {
    let wrapper = {
      name: path,
      render(){
        return h(component) // h的第一个参数可以是字符串，也可以是一个组件定义；h返回的是一个虚拟dom
      }
    }
    return h(wrapper)
 }

function isSameVNodeType(n1, n2) {
  if (n2.shapeFlag & 6 && hmrDirtyComponents.has(n2.type)) {
    n1.shapeFlag &= ~256;
    n2.shapeFlag &= ~512;
    return false;
  }
  return n1.type === n2.type && n1.key === n2.key;
}