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中都可以**

相关推荐
gnip21 分钟前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫1 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel2 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼3 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手6 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku6 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode7 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu7 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu7 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript