vue+element解决第二次打开页面,显示的是上一次关闭之前的的数据问题

表单重置技巧:清空对话框与页面切换时的数据
本文介绍如何使用 Vue 等前端框架通过 `this.$refs[formName].resetFields()` 清除表单数据,确保每次交互时表单状态干净。适合处理缓存问题和提升用户体验。

重置表单
可解决表单数据缓存的情况,每次打开dialog或者切页面时候,先清空表单和验证,保证每次表单都是干净的
方法:

//formName为表单的ref值
this.$refs[formName].resetFields();
`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` 和状态标志); - ✅ 清理所有副作用(定器、事件监听); - ✅ 复杂内容使用虚拟滚动或懒加载。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值