element-plus 报错 ResizeObserver loop limit exceeded 解决

ResizeObserver loop limit exceeded 是一个常见的浏览器控制台警告，通常在使用 ResizeObserver API 时触发。对于使用 Element Plus 的 Vue 3 项目，这个错误可能会影响组件的正常渲染和功能。下面将详细解释这个错误的原因以及如何解决它。

错误原因

1. ResizeObserver 的工作原理

ResizeObserver 是一个用于监听 DOM 元素大小变化的 API。当被观察的元素尺寸发生变化时，ResizeObserver 会触发回调函数。在 Element Plus 中，许多组件依赖 ResizeObserver 来自动调整大小和布局。

2. 循环触发

ResizeObserver loop limit exceeded 错误通常是由于以下原因引起的：

无限循环更新：在 ResizeObserver 的回调函数中对 DOM 进行修改，导致再次触发尺寸变化，进而再次调用回调函数，如此反复，超出了浏览器设定的循环限制。

频繁触发变化：快速连续的尺寸变化（例如窗口大小频繁调整）可能导致 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);
  }
}

**把上面代码粘在app.vue

或者main.js中都可以**