Uncaught ResizeObserver loop completed with undelivered notifications.

### 解决方案概述 当遇到 "ResizeObserver loop completed with undelivered notifications" 这类警告时，通常是由于 `ResizeObserver` 在观察元素尺寸变化的过程中遇到了性能瓶颈或逻辑上的循环依赖。这类问题可以通过优化代码结构和调整监听策略来缓解。 #### 方法一：限制回调频率 通过引入防抖（debounce）机制，可以在一定时间内减少不必要的回调调用次数，防止频繁触发重排和重绘操作： ```javascript let resizeTimeout; const debounceResize = (callback, delay = 100) => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(callback, delay); }; new ResizeObserver((entries) => { entries.forEach(entry => { debounceResize(() => { console.log('Element resized:', entry.contentRect); }); }); }).observe(document.querySelector('.target-element')); ``` 这种方法能够有效降低因快速连续改变大小而导致的性能开销[^3]。 #### 方法二：自定义实现简单版 ResizeObserver 如果默认行为无法满足需求，则可以考虑构建一个简化版本的 `ResizeObserver` 来替代原生API的功能，在必要情况下手动控制何时更新布局信息： ```javascript class SimpleResizeObserver { constructor() { this.targets = new Set(); window.addEventListener('resize', () => this.checkAll()); } observe(target) { if (!this.targets.has(target)) { this.targets.add(target); } } unobserve(target) { this.targets.delete(target); } checkAll() { Array.from(this.targets).forEach(target => { const rect = target.getBoundingClientRect(); // 执行具体业务逻辑... console.log(`Target ${rect.width}x${rect.height}`); }); } } // 使用示例 const observer = new SimpleResizeObserver(); observer.observe(document.querySelector('.another-target')); ``` 此方法绕过了复杂的内部机制，提供了更可控的方式去响应窗口尺寸的变化[^4]。 #### 方法三：修改 Webpack 配置抑制警告 对于某些框架组合如 Vue3 和 Element Plus 或 Ant Design Vue 中出现此类警告的情况，也可以尝试调整开发环境下的Webpack配置以隐藏该类型的日志输出: ```diff module.exports = { devServer: { client: { - overlay: true, + overlay: false, }, }, }; ``` 关闭覆盖层中的错误显示有助于专注于其他更重要的调试工作[^5]。