element-plus 报错 ResizeObserver loop limit exceeded 解决

**Element-Plus 报错 ResizeObserver loop limit exceeded 的解决方案**

在使用 Element-Plus 这个流行的 UI 组件库时，可能会遇到一些报错问题。其中一个常见的问题是 ResizeObserver loop limit exceeded。这篇文章将详细介绍这个问题的原因、表现以及解决方案。

**问题描述**

当你在 Element-Plus 中使用一些组件，如 `ElCollapse` 或 `ElTable` 时，可能会出现以下错误：

ResizeObserver loop limit exceeded

这通常是因为 ResizeObserver 在尝试观察元素大小变化时，进入了一个死循环。

**问题原因**

Element-Plus 的一些组件内部使用 ResizeObserver 来监听元素的大小变化。这是为了实现一些特定的功能，如动态调整表格列宽度或折叠面板的高度。然而，在某些情况下，这个 ResizeObserver 可能会进入一个死循环，从而导致上述错误。

**问题表现**

当你在浏览器控制台中看到这个错误时，可能会出现以下现象：

* 页面渲染速度变慢* UI 组件的行为异常（如表格列宽度不正确或折叠面板高度不正确）
* 浏览器内存占用增加**解决方案**

要解决 ResizeObserver loop limit exceeded 的问题，需要在 Element-Plus 中进行一些调整。具体步骤如下：

###1. 检查组件内部的 ResizeObserver 使用首先，我们需要检查 Element-Plus 中哪些组件内部使用了 ResizeObserver。可以通过查看源码或使用浏览器调试工具来实现。

例如，在 `ElCollapse` 组件中，ResizeObserver 被用于监听折叠面板的高度变化：

javascript// ElCollapse.vue<template>
 <!-- ... -->
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill';

export default {
 // ...
 mounted() {
 this.resizeObserver = new ResizeObserver((entries) => {
 const entry = entries[0];
 if (entry.contentBoxSize) {
 this.height = entry.contentBoxSize.height;
 }
 });
 this.resizeObserver.observe(this.$refs.panel);
 },
};
</script>

###2. 添加防止死循环的机制为了避免 ResizeObserver 进入死循环，我们可以在组件内部添加一个防止死循环的机制。例如，可以使用 `requestIdleCallback` 来延迟执行 ResizeObserver 的回调函数：

javascript// ElCollapse.vue<template>
 <!-- ... -->
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill';

export default {
 // ...
 mounted() {
 this.resizeObserver = new ResizeObserver((entries) => {
 requestIdleCallback(() => {
 const entry = entries[0];
 if (entry.contentBoxSize) {
 this.height = entry.contentBoxSize.height;
 }
 });
 });
 this.resizeObserver.observe(this.$refs.panel);
 },
};
</script>

###3. 使用 ResizeObserver 的 polyfill如果你使用的是较老的浏览器（如 IE 或 Edge），可能需要使用 ResizeObserver 的 polyfill 来实现 ResizeObserver 的功能。可以通过在组件内部引入 polyfill 来实现：

javascript// ElCollapse.vue<template>
 <!-- ... -->
</template>

<script>
import ResizeObserver from 'resize-observer-polyfill';

export default {
 // ...
 mounted() {
 if (!window.ResizeObserver) {
 window.ResizeObserver = ResizeObserver;
 }
 this.resizeObserver = new ResizeObserver((entries) => {
 const entry = entries[0];
 if (entry.contentBoxSize) {
 this.height = entry.contentBoxSize.height;
 }
 });
 this.resizeObserver.observe(this.$refs.panel);
 },
};
</script>

通过以上步骤，可以有效地解决 ResizeObserver loop limit exceeded 的问题。