一文教你徹底解決Vue3中的ResizeObserver警告

更新時間：2025年05月21日 08:45:32 作者：來自星星的坤

這篇文章主要為大家詳細介紹了介紹了Vue3中出現(xiàn)ResizeObserver loop completed with undelivered notifications錯誤的相關解決方法,有需要的小伙伴可以跟隨小編一起學習一下

問題背景

今天在使用 Vue 3 + Ant Design Vue 開發(fā)后臺管理系統(tǒng)時，在頁面頻繁觸發(fā) 元素尺寸變化（如表格滾動、窗口縮放）的時候，控制臺頻繁出現(xiàn)如下警告：

ResizeObserver loop completed with undelivered notifications.

經過查詢，這是一個瀏覽器層面的警告，尤其是 Chrome 對 ResizeObserver 的限制提示 —— 它不會導致程序崩潰，但如果開發(fā)模式下頻繁觸發(fā)，會讓控制臺非常煩人，也不利于我們排查其他真正的錯誤。

如果你也在使用如 ant-design-vue 表格（<a-table>）或其它監(jiān)聽 DOM 尺寸變化的組件，八成也遇到這個問題。

ResizeObserver 警告解釋

這條警告源于 ResizeObserver 的實現(xiàn)機制。它表示監(jiān)聽了 DOM 尺寸變化后，在當前幀處理通知時，可能造成無限循環(huán)或未能及時處理完所有變化。

常見觸發(fā)場景包括：

使用了 <a-table> 且設置了 scroll 屬性；
頁面頻繁觸發(fā) resize；
某些組件內部使用了 ResizeObserver（如圖表、布局組件）；

最初嘗試的方式（未生效）

最開始參考了網上一些解決方案，如通過 Vue 的全局錯誤處理器或監(jiān)聽 window 的 error 事件來過濾該錯誤。

// main.js 或入口文件
app.config.errorHandler = (err, instance, info) => {
  if (err.message.includes('ResizeObserver')) {
    return false; // 阻止錯誤繼續(xù)傳播
  }
};
 
// 或監(jiān)聽全局錯誤
window.addEventListener('error', (e) => {
  if (e.message?.includes('ResizeObserver')) {
    e.stopImmediatePropagation();
  }
});

但實際測試發(fā)現(xiàn)：并不能有效阻止 ResizeObserver 警告彈出，尤其是在使用 ant-design-vue 表格時。

正確可行的解決方案

經過深入排查和多方驗證，發(fā)現(xiàn)該警告主要是 Webpack Dev Server（開發(fā)環(huán)境）中的 overlay 報錯層顯示導致的。

解決思路

捕獲錯誤事件；

匹配 ResizeObserver 報錯信息；

隱藏開發(fā)服務器報錯 overlay 元素；

代碼實現(xiàn)

// 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);
      }
 
      // 隱藏開發(fā)環(huán)境 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 警告，頁面開發(fā)體驗明顯提升。

方法補充

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

問題描述:

鼠標拖拽瀏覽器窗口改變視圖大小時報錯。報錯如下

解決方案

在APP.VUE添加使用了ResizeObserver監(jiān)聽器并且該監(jiān)聽器觸發(fā)了重復的調整大小事件

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>