【memory leak】A memory leak occurred while I was using vue

[allenye0909]

Vue version

3.4.21

Link to minimal reproduction

none （stand-alone software）

Steps to reproduce

hooks/layout.ts

import {useTaskStore} from "@/stores/modules/task"

export default () => {
  const taskStore = useTaskStore()
  const layoutMap = {
    1: (layoutName: any) => {
      if (layoutName === "list") {
        return "state_1_list"
      }
      if (layoutName === "detail") {
        return "state_1_detail"
      }
    },
    2: (layoutName: any) => {
      if (layoutName === "list") {
        return "state_2_list"
      }
      if (layoutName === "detail") {
        return "state_2_detail"
      }
    },
    3: (layoutName: any) => {
      if (layoutName === "list") {
        return "state_3_list"
      }
      if (layoutName === "detail") {
        return "state_3_detail"
      }
    }
  }

  function getWid_Hei() {
    let width, height;
    if (window.innerWidth) {
      width = window.innerWidth;
      height = window.innerHeight;
    } else if (document.compatMode === "BackCompat") {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
    } else {
      width = document.documentElement.clientWidth;
      height = document.documentElement.clientHeight;
    }
    return {
      width: width,
      height: height
    }
  }

  const getCellDetailRect = (state: number) => {
    // TODO 列表组件宽度修改后需要更新此处代码
    const taskListContainerWidthObj: any = {
      1: 470,
      2: 470,
      3: 4
    }
    // const taskListContainerWidth = document.querySelector("#taskListContainer")?.getBoundingClientRect().width || 0
    const drawContainerWidth = document.querySelector(".drawContainer")?.getBoundingClientRect().width || 0
    const TaskDetailCellTableWidth = document.querySelector("#TaskDetailCellTable")?.getBoundingClientRect().width || 0
    const paddingMarginWidth = 16 * 2 + 2 + 16 * 2 + 16
    const cw = getWid_Hei().width - taskListContainerWidthObj[state] - drawContainerWidth - TaskDetailCellTableWidth - paddingMarginWidth

    const taskDetailContainerHeight = document.querySelector(".taskDetailContainer")?.getBoundingClientRect().height || 0
    const paddingMarginHeight = 16 * 2
    const ch = taskDetailContainerHeight - paddingMarginHeight - 60
    // console.log(state, cw, ch, taskListContainerWidth, drawContainerWidth, TaskDetailCellTableWidth)
    return {
      height: ch,
      width: cw
    }
  }

  const getClassByState = (layoutName: string) => {
    return layoutMap[taskStore.currentLayoutState](layoutName)
  }

  const selectLayout = (dir: number) => {
    // debugger
    // console.log("当前", taskStore.currentLayoutState)
    if (taskStore.currentLayoutState === 1 && dir === 1) {
      taskStore.setCurrentLayoutState(2)
      if (taskStore.currentTaskModuleType === "Red") {
        taskStore.setCurrentCellToolState(3)
      }
    } else if (taskStore.currentLayoutState === 3 && dir === 1) {
      taskStore.setCurrentLayoutState(1)
      taskStore.setCurrentCellImageZoomState(taskStore.currentCellImageZoomState - 2)
    } else if (taskStore.currentLayoutState === 2 && dir === -1) {
      taskStore.setCurrentLayoutState(1)
    } else if (taskStore.currentLayoutState === 1 && dir === -1) {
      taskStore.setCurrentLayoutState(3)
      taskStore.setCurrentCellImageZoomState(taskStore.currentCellImageZoomState === 14 ? 14 : taskStore.currentCellImageZoomState + 2)
    }

  }
  return {
    getClassByState, selectLayout, getCellDetailRect
  }
}

What is expected?

Locate What causes memory leaks，WHY？High probability is the question I use!!

Who can save me

What is actually happening?

When I get a task, I cache the task list and task details using pinia,Switch tasks and cache different task details

System Info

"vue": "^3.4.21",
"vite": "^4.4.9",
"vitest": "^0.34.4",
"vue-tsc": "^1.8.11"
"pinia": "^2.1.6",

Any additional comments?

No response

[allenye0909]

env:

[liangqi2510]

blockStack？和我的情况有点类似。https://github.com/liangqi2510/vue-block-study 不知道能不能帮到你。

[allenye0909]

感谢回复，@liangqi2510 是有点类似， @yyx990803 已经处理了，或者是我使用方式不正确，那应该怎么使用呢？

https://github.com/vuejs/core/pull/3106#issuecomment-807584522

[liangqi2510]

我觉得你的情况和我类似，是因为 blockStack 正常情况下，在每次渲染后应该是空的。我现在还不确定你和我遇到的相同的情况。我可以详细说一下我的情况，和我解决的方式。

我遇到的情况是，我在使用element-puls的table组件的自定义 col 的 slot。但我插槽部分内的模版是有问题的，特定情况下，会产生异常。但这个异常被这个插槽所在的渲染函数（table-column）捕获，使 vue 框架没有捕获这个异常（正常应该由vue框架进行处理参考）。渲染过程也继续执行，但blockStack没有正常被清空。

我清理掉了我模版部分的错误，内存泄漏就消失了。你可以在控制台，把遇到异常暂停和遇到未捕获的异常勾选上，进行调试，看看能不找到这类异常。

[liangqi2510]

补充一个我的截图

[allenye0909]

@liangqi2510 确实是类似。 “我清理掉了我模版部分的错误，内存泄漏就消失了”，方便贴一下修改的代码示例和修改后代码示例吗？

[liangqi2510]

代码不太方便，可以举个例子 {{row.userData.name}} -> {{row?.userData?.name}}

[yyx990803]

VUE_HMR_RUNTIME only exists in dev mode. Make sure to only report memory leaks that happen in production mode, and make sure to provide actual reproductions.

There's nothing we can do without reproductions.