javascript - 为什么存在el-form的页面被切换之后还在占用内存？

Question

存在el-form的页面切换之后内存还在被占用，操作久了之后内存占用越来越大

一个vue3的两个页面都只含有el-form和el-table，无定时器和监听器，当操作久了之后发现内存一直在增长，然后去除掉table，发现只要含有el-form，页面频繁切换内存会增长且不会释放，不知道如何去释放这个被占用的内存，像echarts有dispose方法，但form没听说过，而且没有明白为什么form会造成内存一直占用。

补充问题，代码如下：
切换的页面就是InspectionReportVue、StatisticalReportVue、DefectReportVue这几个组件，这几个组件里只有form和table。另外index.vue也不是一个路由页面，它是嵌套在路由页面A里面的一个组件，同样也是被v-if来控制显示与否的。我不知道是不是我写的这个插槽有问题导致内存泄漏的

//index.vue<template>  <TableLayoutSelf title="XXX" :menuList="menuList">    <template v-slot="data">      <InspectionReportVue key="666" v-if="data.active === '1'" />      <StatisticalReportVue key="777" v-if="data.active === '2'" />      <DefectReportVue key="888" v-if="data.active === '3'" />    </template>  </TableLayoutSelf></template><script setup name="ReportForm">import TableLayoutSelf from '../components/TableLayoutSelf/index.vue'import InspectionReportVue from './inspectionReport.vue'import StatisticalReportVue from './statisticalReport.vue'import DefectReportVue from './defectReport.vue'import nav1 from './images/nav1.png'import nav2 from './images/nav2.png'import nav3 from './images/nav3.png'const menuList = ref([  {    id: '1',    img: nav1,    text: 'XXX',  },  {    id: '2',    img: nav2,    text: 'XXX',  },  {    id: '3',    img: nav3,    text: 'XXX',  },])</script><style scoped lang="scss"></style>

//TableLayoutSelf.vue<template>  <div class="layout">    <div class="aside">      <div class="title">{{ title }}</div>      <div class="menu">        <div class="item" v-for="item in menuList" :key="item.id" :id="item.id" @click="handleClick" :class="{'active': item.id === activeId}">          <img :src="item.img" :id="item.id" />          <span :id="item.id">{{ item.text }}</span>        </div>      </div>    </div>    <div class="content">      <slot :active="activeId"></slot>    </div>  </div></template><script setup name="TableLayoutSelfSelf">const props = defineProps({  title: String,  menuList: Array,})const { menuList } = toRefs(props)const activeId = ref('1')const handleClick = (e) => {  activeId.value = e.target.id}</script><style scoped lang="scss">.layout {  display: flex;  height: calc(100vh - vh(150));  .aside {    width: vw(240);    flex-shrink: 0;    .title {      line-height: vh(55);      text-align: center;      background: #2d3e5b;      color: #fff;      font-size: vw(17);    }    .menu {      .item {        line-height: vh(76);        border: 1px solid #22467e;        display: flex;        align-items: center;        padding-left: vw(25);        > img {          width: vw(36);          height: vh(38);        }        > span {          margin-left: vw(25);          font-size: vw(18);          color: #fff;        }      }      .item:hover,      .active {        background: linear-gradient(to right, #174a93, rgba(0, 0, 0, 0));      }      .item:not(:last-child) {        border-bottom: 0;      }    }  }  .content {    width: calc(100% - vw(240));  }}</style>

Answer 1

先看看切换页面有没有使用<keep-alive>
如果无从入手，可以直接用开发者工具拍几个内存快照对比一下切换页面前后的内存变化，直接追踪堆中的对象引用