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

问题背景

今天在使用 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 报错层 显示导致的。

解决思路：

1. 捕获错误事件；

2. 匹配 ResizeObserver 报错信息；

3. 隐藏开发服务器报错 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');
      }
    }
  });
});

效果验证

应用该代码后，再次缩放窗口、多次滚动表格，控制台不再弹出烦人的 ResizeObserver 警告，页面开发体验明显提升。

总结

• ResizeObserver 警告是 非致命性警告，但在开发环境中会干扰控制台输出；

• 通过 error 事件捕获并主动隐藏 webpack-dev-server 的 overlay 错误提示，可以有效消除影响；

• 本方案 适用于 Vue3 + Webpack 开发环境，特别是配合 ant-design-vue 的用户；

• 注意：这只是开发阶段优化，不建议在生产环境使用类似做法；

最后

希望这篇文章能帮你彻底摆脱控制台 “ResizeObserver” 的烦恼。如果你也遇到类似问题，欢迎留言一起探讨！