`el-drawer` 是
Element Plus（基于
Vue 3）中的一个抽屉组件，常用于从屏幕一侧滑出的侧边栏。如果你发现 `el-drawer` **第
一次打开很快，但
第二次及之后变得很慢**，这通常不是因为组件本身性能
问题，而是由于以下几个常见原因导致的：
---
### ✅ 常见原因与
解决方案
#### 1. **未销毁内部组件或存在大量 DOM 节点**
当 `el-drawer` 设置为 `destroy-on-close` 为 `false`（默认行为）
时，
关闭 drawer 只是隐藏它，内部的内容仍然保留在内存中，
并且事件监听、子组件实例没有被销毁。
如果内部有复杂组件（如表格、表单验证、图表等），再次
打开时会
重新激活这些已存在的组件，可能导致卡顿。
✅ **
解决方案：启用 `destroy-on-close`**
```
vue
<template>
<el-drawer
v-model="drawerVisible"
title="抽屉标题"
:destroy-on-close="true" <!-- 关键：每次
关闭后销毁内容 -->
:with-header="true"
>
<div>
<!-- 抽屉内容，比如复杂表单或表格 -->
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" />
</el-table>
</div>
</el-drawer>
</template>
<script setup>
import { ref } from '
vue'
const drawerVisible = ref(false)
const tableData = ref([
{ name: '张三' },
{ name: '李四' }
])
</script>
```
📌 解释：`destroy-on-close="true"` 表示每次
关闭抽屉
时，都会销毁其内部的插槽内容，下次
打开时重新渲染。虽然首次渲染稍慢一点，但避免了状态累积和内存泄漏，长期使用更稳定。
---
#### 2. **抽屉内执行了耗
时操作（如大量
数据处理、接口请求）**
有些开发者会在 `<el-drawer>` 的根组件 `mounted` 或 `onMounted()` 中发起网络请求或进行大
数据计算。如果这些逻辑在每次
打开时都执行，而没有控制频率，就会造成“
第二次变慢”的假象。
✅ **
解决方案：控制副作用触发
时机**
```
vue
<script setup>
import { ref, watch } from '
vue'
import { fetchData } from '@/api/data'
const drawerVisible = ref(false)
const data = ref([])
const loaded = ref(false) // 标记是否已加载过
数据
watch(drawerVisible, async (newVal) => {
if (newVal && !loaded.value) {
const res = await fetchData() // 模拟异步请求
data.value = res.list
loaded.value = true
}
})
</script>
```
📌 解释：通过 `loaded` 标志位避免重复请求，仅在第
一次打开时加载
数据，后续直接复用。若需要每次都刷新，则应优化接口性能或使用缓存。
---
#### 3. **
Vue 组件缓存
问题（使用了 keep-alive）**
如果你把 `el-drawer` 或其父组件包裹在 `<keep-alive>` 中，可能会导致组件状态长期驻留，引起响应变慢或内存占用上升。
✅ **
解决方案：合理使用 `keep-alive` 的 include/exclude**
```
vue
<keep-alive exclude="DrawerComponent"> <!-- 不缓存抽屉 -->
<router-view />
</keep-alive>
```
或者不要将包含 heavy drawer 的
页面缓存。
---
#### 4. **样式重绘/回流严重（CSS 动画或布局抖动）**
Element Plus 的 `el-drawer` 使用 CSS transform 实现动画。但如果抽屉内容区域过于复杂（嵌套深、浮动、flex 布局层级多），会导致浏览器重排重绘
时间增加。
✅ **优化建议：**
- 减少不必要的嵌套结构；
- 避免使用 `v-if`
+ `v-for` 同级；
- 对静态内容做防抖/节流；
- 使用 `virtual scroll` 处理长列表；
例如使用 `el-table`
时开启虚拟滚动：
```
vue
<el-table :data="bigData" virtual-scroll style="height: 400px">
```
---
#### 5. **内存泄漏（未清理定
时器、事件监听、订阅）**
如果抽屉内部注册了全局事件（如 `window.resize`）、定
时器、WebSocket 订阅等，但未在
关闭时清除，会造成内存堆积，多次
打开后性能下降。
✅ **正确清理资源：**
```
vue
<script setup>
import { onMounted, onUnmounted } from '
vue'
let timer = null
onMounted(() => {
timer = setInterval(() => {
console.log('tick')
}, 1000)
window.addEventListener('resize', handleResize)
})
function handleResize() {
// ...
}
onUnmounted(() => {
if (timer) clearInterval(timer)
window.removeEventListener('resize', handleResize)
})
</script>
```
📌 确保所有副作用都能被回收。
---
### 🧪 排查方法
你可以通过以下方式定位具体瓶颈：
1.
打开 Chrome DevTools → Performance 面板 → 录制
一次打开关闭流程；
2. 查看是否有长
时间运行的 JS 任务、大量 Layout/Recalculate Style；
3. 检查是否有频繁的 GC（垃圾回收）；
4. 使用 Memory 面板检查是否存在内存泄漏。
---
### ✅ 总结：推荐配置
```
vue
<el-drawer
v-model="drawerVisible"
title="信息面板"
:destroy-on-close="true"
:close-on-click-modal="false"
>
<DrawerContent />
</el-drawer>
```
- ✅ `destroy-on-close="true`：确保每次重建内容；
- ✅ 内容组件自己管理
数据加载（配合 `onMounted` 和状态标志）；
- ✅ 清理所有副作用（定
时器、事件监听）；
- ✅ 复杂内容使用虚拟滚动或懒加载。
---
表单重置技巧：清空对话框与页面切换时的数据
本文介绍如何使用 Vue 等前端框架通过 `this.$refs[formName].resetFields()` 清除表单数据，确保每次交互时表单状态干净。适合处理缓存问题和提升用户体验。
扫一扫
2378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
