vue3 element-plus ResizeObserve loop limit Exceeded
时间: 2023-08-16 13:10:30 浏览: 88
这个问题是因为使用了 vue3 和 element-plus,在使用 ResizeObserver 时触发了循环嵌套,导致浏览器抛出了 "ResizeObserve loop limit Exceeded" 的错误。
解决这个问题的方法是升级 element-plus 到最新版本,因为在新版本中已经修复了这个问题。如果升级后仍然有问题,可以尝试手动升级 ResizeObserver Polyfill 的版本,或者使用其他的 ResizeObserver Polyfill。同时,也可以尝试使用 setTimeout 或 requestAnimationFrame 来延迟触发 ResizeObserver 的回调函数,以避免触发循环嵌套。
相关问题
怎么使用setTimeout 解决vue3 element-plus ResizeObserve loop limit Exceeded这个问题
使用 setTimeout 来解决 "ResizeObserve loop limit Exceeded" 问题的方法是在触发 ResizeObserver 的回调函数之前,先使用 setTimeout 将回调函数延迟一段时间再执行。这样可以避免 ResizeObserver 回调函数的频繁触发,从而避免循环嵌套的问题。
以下是一个使用 setTimeout 解决 "ResizeObserve loop limit Exceeded" 问题的示例代码:
```
<template>
<div ref="container">
<!-- your content -->
</div>
</template>
<script>
import { onMounted, onUnmounted } from 'vue';
export default {
setup() {
let resizeObserver = null;
const containerRef = ref(null);
const resizeHandler = () => {
setTimeout(() => {
// your resize handler code here
}, 500); // 延迟 500ms 后执行回调函数
};
onMounted(() => {
resizeObserver = new ResizeObserver(resizeHandler);
resizeObserver.observe(containerRef.value);
});
onUnmounted(() => {
if (resizeObserver) {
resizeObserver.disconnect();
resizeObserver = null;
}
});
return {
containerRef
};
}
};
</script>
```
在上面的代码中,我们使用了 setTimeout 将 ResizeObserver 回调函数的执行延迟了 500ms。你可以根据实际情况调整延迟时间。这样就可以避免 "ResizeObserve loop limit Exceeded" 问题了。
vue3 element-plus el-select 再次重新选择时报错ResizeObserve loop limit Exceeded
这个错误是因为 `el-select` 在重新选择时,会不停地调用 `ResizeObserver`。而 `ResizeObserver` 是一个监控元素大小变化的 API,如果在短时间内频繁地修改元素大小,就会触发该错误。
解决这个问题的方法是,在 `el-select` 组件中添加 `v-if` 判断,当组件隐藏时才进行重新选择。例如:
```html
<template>
<el-select v-if="showSelect" v-model="selected" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
```
在组件的 `data` 中添加 `showSelect` 属性,并在需要重新选择时将其设置为 `false`,待组件隐藏后再将其设置为 `true`,以避免频繁调用 `ResizeObserver` 导致该错误。
```javascript
export default {
data() {
return {
showSelect: true,
selected: null,
options: [
{ value: 'value1', label: '选项1' },
{ value: 'value2', label: '选项2' },
{ value: 'value3', label: '选项3' }
]
}
},
methods: {
resetSelect() {
this.showSelect = false
this.$nextTick(() => {
this.showSelect = true
})
}
}
}
```
在需要重新选择时,调用 `resetSelect` 方法即可。例如:
```html
<el-button @click="resetSelect">重新选择</el-button>
```
这样就可以避免 `ResizeObserver loop limit Exceeded` 错误的出现了。