首页

当前位置：网站首页 > 技术文章 > 正文

被偷家了!崩溃!!Element-plus组件测试的后续~

myzbx 2025-09-09 07:28 28 浏览

最新消息，VUE 的 slot 移除产生内存泄漏问题已修复！！！前端佬们嗨起来~

---------------------分割线
-------------------------------

这个是之前一个文章的后续，没有看过的前端佬可以点这里看看~

致歉

首先，向前端佬们说声，对不起！

怪自己学艺不精，没有仔细斟酌，上一篇文章里有一些错误，必须在这里指出来！

造成错误的原因有两个，Devtools 问题和 VUE 的 slots 的问题，没有看过之前的前端佬也没有关系，因为这个关乎很多前端佬的测试。以下为详情。

Devtools工具的BUG

#技术分享Devtools 的问题，是通过 Chromium issues 中知道的。有条件的前端佬可以戳这里。没有条件的，我这里借花献佛说明下。比如下面这个例子：

<!DOCTYPE html>

<html>

<head>

<title>方块从左到右动画</title>

<style>

.square { width: 50px; height: 50px; background-color: red; position: absolute; top: 50px; left: 0; animation: moveRight 2s linear infinite; } @keyframes moveRight { from { transform: translateX(0); }

to { transform: translateX(200px); } } .animation-paused { animation-play-state: paused; } </style>

</head>

<body>

<div id="animatedSquare" class="square"></div>

<button id="removeButton">移除方块</button>

<script>

let square = document.getElementById('animatedSquare'); const removeButton = document.getElementById('removeButton'); const handleRemove = () => { if (square) { square.classList.add('animation-paused'); requestAnimationFrame(() => { square.remove(); square = undefined; console.log("方块已移除"); }); } }; removeButton.addEventListener('click', handleRemove); </script>

</body>

</html>

当你一直打开 Devtools 工具时（即按开 F12），然后点击移除元素。然后测试一下，发现仍然存在分离元素，如下图：

明明已经移除所有事件、排除了全局变量的原因，还是有内存泄漏的问题。我这边经过 chrome134、chrome135验证两个版本的验证，都存在。

没别的了，就是 Devtools 的问题。按照 Chromium 项目人员解释的原因，如下图：

翻译中心思想就是，Animations （动画）面板中保留了对动画元素的引用。

所以要测试带有动画元素的组件，需要在操作完毕之后，再打开 Devtools 面板。

Vue的slot的BUG

还是先上链接，有条件的可以看 vue 的 commit。点这里

没条件，我这边可以举例子来解释下。

假如有这么一个父组件：

<template>

<div>

<slot></slot>

</div>

</template>

然后我引用这个组件。

<template>

<ParentJBK v-if="!model">111</ParentJBK>

<button @click="fn1">Hidden</button>

</template>

<script>

import { ref } from 'vue' imprt ParentJBK from './parentJBK.vue'

export default { components:{ ParentJBK }, setup(){ const model = ref(false) function fn1(){ model.value = true; } return { model, fn1 } } }

</script>

按照上面的，如果在父组件下，填充了元素。那么，这个时候去销毁掉父组件元素，就会在分离元素下出现销毁的 div 元素。有意愿的可以动手试试。

看上面的那个 commit，大概思路就是在父组件销毁后，顺道把 slot 销毁掉。

再次崩溃

经过这么一轮，我觉的，给来个痛快的吧。

以上的发现，都是在提了 Element-plut 的 issues 后，经过 Element-plus 贡献者提出的。然后涉及的背后问题，我事先是想都想不到的。谁敢想 Devtools 都有问题，原来可是我朝圣的对象啊~。。。

调整后的结论

经过上述问题，我重新调整了测试方法，然后根据 目前我所知的来测试 ，在 Element-plus 组件中，还会存在泄漏的组件如下：

el-select
el-popper
el-carousel
el-tabs
el-button
el-menu
el-dropdown
el-result
el-descriptions

最后说下

对于内存泄漏问题，这里有必要再和大家颗粒度对齐下~

内存泄漏是指程序在申请使用内存后，无法在程序关闭后正常释放应该释放的内存，导致此内存一直被占据。

用上面这个例子解释就是，当我们使用 JS 去销毁 DOM 元素后，但因为某些 JS 变量或者事件或者哪个回调函数中还存在引用这段 DOM 元素，导致 DOM 树上的元素是被移除了，而内存却还保留了 DOM 元素数据。结果就是随着操作一直增加，占用内存得不到释放，该程序使用的内存就会一直增加。

之前评论中，有些前端大佬说，使用 Element-plus 组件，总是卡。我们倒可以先分析分析，看看是不是在渲染的时候，出现了跳帧的情况。即元素节点渲染过多或者 JS 某个程序运算过多，造成在16ms 左右不能渲染完整。

跳帧情况会很多，大家在 juejin 中看看其他大佬的文章，有很多说明。

才疏学浅，随时接受大佬的赐教~

评论也可以贴出自己的问题，大家共同进步 respect！

JS 回调

上一篇：必看!Spring Boot 项目新老版本 Controller 低侵入式切换实战秘籍
下一篇：万字长文帮你彻底搞懂JS中的Promise

被偷家了!崩溃!!Element-plus组件测试的后续~

致歉

Devtools工具的BUG

Vue的slot的BUG

再次崩溃

调整后的结论

最后说下

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

用上Vue3，你真的变了吗?（vue3 key）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿