当前位置：首页 > news >正文

VUE3 中的 ResizeObserver 警告彻底解决方案

news 2025/5/21 6:23:08

问题背景

今天在使用 Vue 3 + Ant Design Vue 开发后台管理系统时，在页面频繁触发 元素尺寸变化（如表格滚动、窗口缩放） 的时候，控制台频繁出现如下警告：

ResizeObserver loop completed with undelivered notifications.

经过查询，这是一个 浏览器层面的警告，尤其是 Chrome 对 ResizeObserver 的限制提示 —— 它不会导致程序崩溃，但如果开发模式下频繁触发，会让控制台非常烦人，也不利于我们排查其他真正的错误。

如果你也在使用如 ant-design-vue 表格（<a-table>）或其它监听 DOM 尺寸变化的组件，八成也遇到这个问题。

ResizeObserver 警告解释

这条警告源于 ResizeObserver 的实现机制。它表示监听了 DOM 尺寸变化后，在当前帧处理通知时，可能造成无限循环或未能及时处理完所有变化。

常见触发场景包括：

使用了 <a-table> 且设置了 scroll 属性；
页面频繁触发 resize；
某些组件内部使用了 ResizeObserver（如图表、布局组件）；

最初尝试的方式（未生效）

最开始参考了网上一些解决方案，如通过 Vue 的全局错误处理器或监听 window 的 error 事件来过滤该错误。

// main.js 或入口文件
app.config.errorHandler = (err, instance, info) => {if (err.message.includes('ResizeObserver')) {return false; // 阻止错误继续传播}
};// 或监听全局错误
window.addEventListener('error', (e) => {if (e.message?.includes('ResizeObserver')) {e.stopImmediatePropagation();}
});

但 实际测试发现：并不能有效阻止 ResizeObserver 警告弹出，尤其是在使用 ant-design-vue 表格时。

正确可行的解决方案

经过深入排查和多方验证，发现该警告主要是 Webpack Dev Server（开发环境）中的 overlay 报错层 显示导致的。

解决思路：

捕获错误事件；
匹配 ResizeObserver 报错信息；
隐藏开发服务器报错 overlay 元素；

代码实现如下：

// main.js 或入口文件
const ignoreErrors = ["ResizeObserver loop completed with undelivered notifications","ResizeObserver loop limit exceeded"
];window.addEventListener('error', e => {let errorMsg = e.message;ignoreErrors.forEach(m => {if (errorMsg.startsWith(m)) {console.error(errorMsg);if (e.error) {console.error(e.error.stack);}// 隐藏开发环境 overlay 报错界面const resizeObserverErrDiv = document.getElementById('webpack-dev-server-client-overlay-div');const resizeObserverErr = document.getElementById('webpack-dev-server-client-overlay');if (resizeObserverErr) {resizeObserverErr.setAttribute('style', 'display: none');}if (resizeObserverErrDiv) {resizeObserverErrDiv.setAttribute('style', 'display: none');}}});
});