ResizeObserver loop limit exceeded报错解决方案

ResizeObserver loop limit exceeded报错解决方案

项目接入前端感知系统，采集到很多ResizeObserver loop limit exceeded错误。本地运行不是这个报错信息，当反复拖拽改变窗口大小时，本地运行错误信息如下：

问题原因：element-ui中的table组件的引入

如果在一个动画帧内，ResizeObserver不能处理所有的observations，就会触发这个ResizeObserver loop limit exceeded。

解决方法：

方案1. 阻止table的重绘，例如给所有列都增加width，但是这个方案不好，无法自适应宽度。
方案2. resize时，给回调进行节流，使其1帧内最多执行一次。代码如下：

import ElementUI, {Table} from "element-ui";

const fixElTableErr = (table) => {
  const oldResizeListener = table.methods.resizeListener;
  table.methods.resizeListener = function () {
      window.requestAnimationFrame(oldResizeListener.bind(this));
  };
};
// 一定要在Vue.use之前执行此函数
fixElTableErr(Table);

Vue.use(ElementUI);

参考文档：https://blog.csdn.net/gudeng007/article/details/125765927

注意：后期继续追踪发现其实上述方法只是解决了table一个组件的问题，还有其他组件也有类似的问题这无法用上述方法规避掉。
后来参考element-ui官方文档，2.15.7版本及以上版本已经修复了该问题，所以最好的方法是升级使用的element-ui的新版本，所有的问题都解决了。