首页elementPlus弹窗报错Uncaught ResizeObserver loop completed with undelivered notifications.

elementPlus弹窗报错Uncaught ResizeObserver loop completed with undelivered notifications.

时间: 2025-02-06 07:13:58 浏览: 57

### ElementPlus 弹窗中 ResizeObserver 错误解决方案当遇到 `ResizeObserver loop completed with undelivered notifications` 的错误时，这通常是由于频繁触发的重排（reflow）或重绘（repaint）事件引起的[^3]。为了有效解决这个问题，在 Vue 项目中可以通过修改全局的 `window.ResizeObserver` 来实现。通过引入防抖机制来减少不必要的回调调用频率，可以有效地缓解这一问题。具体做法是在项目的入口文件或者主要组件如 `App.vue` 中覆盖默认的 `ResizeObserver` 实现： ```javascript const debounce = (fn, delay) => { let timer; return (...args) => { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn(...args); }, delay); }; }; // 覆盖原始的 ResizeObserver 类 const _ResizeObserver = window.ResizeObserver; window.ResizeObserver = class ResizeObserver extends _ResizeObserver { constructor(callback) { // 使用防抖后的回调替代原生回调 callback = debounce(callback, 100); super(callback); } }; ``` 上述代码片段展示了如何利用 JavaScript 的类继承特性以及简单的防抖逻辑来优化 `ResizeObserver` 行为，从而避免因快速连续的变化而导致性能瓶颈和警告信息的发生[^2]。对于特定于 Element Plus 组件的情况，如果仅希望针对某些弹窗或其他 UI 控件应用此修正，则可以在相应组件初始化之前执行这段脚本，确保自定义版本的 `ResizeObserver` 已经生效再加载相关依赖项。此外，也可以考虑升级到最新版的 Element Plus 和浏览器版本，因为开发者社区可能会已经修复了一些已知的问题并提高了兼容性和稳定性[^4]。

阅读全文