快捷導(dǎo)航

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

更新時(shí)間：2025年05月21日 08:45:32 作者：來(lái)自星星的坤

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

問(wèn)題背景

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

ResizeObserver loop completed with undelivered notifications.

經(jīng)過(guò)查詢(xún)，這是一個(gè) 瀏覽器層面的警告，尤其是 Chrome 對(duì) ResizeObserver 的限制提示 —— 它不會(huì)導(dǎo)致程序崩潰，但如果開(kāi)發(fā)模式下頻繁觸發(fā)，會(huì)讓控制臺(tái)非常煩人，也不利于我們排查其他真正的錯(cuò)誤。

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

ResizeObserver 警告解釋

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

常見(jiàn)觸發(fā)場(chǎng)景包括：

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

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

最開(kāi)始參考了網(wǎng)上一些解決方案，如通過(guò) Vue 的全局錯(cuò)誤處理器或監(jiān)聽(tīng) window 的 error 事件來(lái)過(guò)濾該錯(cuò)誤。

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

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

正確可行的解決方案

經(jīng)過(guò)深入排查和多方驗(yàn)證，發(fā)現(xiàn)該警告主要是 Webpack Dev Server（開(kāi)發(fā)環(huán)境）中的 overlay 報(bào)錯(cuò)層顯示導(dǎo)致的。

解決思路

捕獲錯(cuò)誤事件；

匹配 ResizeObserver 報(bào)錯(cuò)信息；

隱藏開(kāi)發(fā)服務(wù)器報(bào)錯(cuò) overlay 元素；

代碼實(shí)現(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);
      }
 
      // 隱藏開(kāi)發(fā)環(huán)境 overlay 報(bào)錯(cuò)界面
      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');
      }
    }
  });
});

效果驗(yàn)證

應(yīng)用該代碼后，再次縮放窗口、多次滾動(dòng)表格，控制臺(tái)不再?gòu)棾鰺┤说?ResizeObserver 警告，頁(yè)面開(kāi)發(fā)體驗(yàn)明顯提升。

方法補(bǔ)充

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

問(wèn)題描述:

鼠標(biāo)拖拽瀏覽器窗口改變視圖大小時(shí)報(bào)錯(cuò)。報(bào)錯(cuò)如下

解決方案

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

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>