vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 ResizeObserver警告解决

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

作者：来自星星的坤

这篇文章主要为大家详细介绍了介绍了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 尺寸变化后，在当前帧处理通知时，可能造成无限循环或未能及时处理完所有变化。

常见触发场景包括：

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

最开始参考了网上一些解决方案，如通过 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警告解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文