一文教你彻底解决Vue3中的ResizeObserver警告

更新时间：2025年05月21日 08:45:32 作者：来自星星的坤

这篇文章主要为大家详细介绍了介绍了Vue3中出现ResizeObserver loop completed with undelivered notifications错误的相关解决方法,有需要的小伙伴可以跟随小编一起学习一下

问题背景

今天在使用 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');
      }
    }
  });
});

效果验证

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

方法补充

VUE 使用Element-plus ResizeObserver loop completed with undelivered notifications

问题描述:

鼠标拖拽浏览器窗口改变视图大小时报错。报错如下

解决方案

在APP.VUE添加使用了ResizeObserver监听器并且该监听器触发了重复的调整大小事件

const debounce = (fn, delay) => {
      let timer = null
      return function () {
        let context = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          fn.apply(context, args)
        }, delay)
      }
    }

    const _ResizeObserver = window.ResizeObserver
    window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
      constructor(callback) {
        callback = debounce(callback, 16)
        super(callback)
      }
    }

Vue 3.0 代码

<template>
  <el-header>
    <Head />
  </el-header>

  <div class="EMS_ViewBotton LKJ_Displayflex">
    <div class="NavMenu">
      <NavMenu></NavMenu>
    </div>
    <div class="RefreshView">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'

export default {
  name: 'App',
  components: {
    Head: defineAsyncComponent(() => import('./components/Head.vue')),
    NavMenu: defineAsyncComponent(() => import('./components/NavMenu.vue')),
  },
  setup() {
    const debounce = (fn, delay) => {
      let timer = null
      return function () {
        let context = this
        let args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
          fn.apply(context, args)
        }, delay)
      }
    }

    const _ResizeObserver = window.ResizeObserver
    window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
      constructor(callback) {
        callback = debounce(callback, 16)
        super(callback)
      }
    }
    return {}
  },
}
</script>

<style  lang="scss" >
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
}
</style>
<style>
@import url('assets/css/common.scss');
</style>

总结

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

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

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

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

到此这篇关于一文教你彻底解决Vue3中的ResizeObserver警告的文章就介绍到这了,更多相关Vue3 ResizeObserver警告解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3使用ResizeObserver监听元素的尺寸宽度变化

vue中循环多个li(表格)并获取对应的ref的操作代码
我想要获取每一个循环并获取每一个li(或者其它循环项)的ref,以便于后续的操作,接下来通过本文给大家分享vue中循环多个li(表格)并获取对应的ref的操作代码,感兴趣的朋友跟随小编一起看看吧
2024-02-02
vue中计算属性（computed）、methods和watched之间的区别
这篇文章主要给大家介绍了关于vue中计算属性（computed）、methods和watched之间区别的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
2017-07-07
解决vue中使用less/sass及使用中遇到无效的问题
这篇文章主要介绍了解决vue中使用less/sass及使用中遇到无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue中img的src属性绑定与static文件夹实例
本篇文章中主要介绍了Vue中img的src属性绑定与static文件夹实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-05-05
vue路由--网站导航功能详解
这篇文章主要介绍了vue路由--网站导航功能详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
vue中el-form-item展开项居中的实现方式
这篇文章主要介绍了vue中el-form-item展开项居中的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue实现登录、注册、退出、跳转等功能
这篇文章主要介绍了vue实现登录、注册、退出、跳转等功能,需要的朋友可以参考下
2020-12-12
vue实现echarts中的仪表盘
这篇文章主要为大家详细介绍了vue实现echarts中的仪表盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue如何判断安卓还是IOS
这篇文章主要介绍了vue如何判断安卓还是IOS，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue 兄弟组件的信息传递的方法实例详解
这篇文章主要介绍了vue 兄弟组件的信息传递的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08