vue报错ResizeObserver loop completed with undelivered notifications
时间: 2023-11-15 07:02:40 浏览: 70
这个错误通常是由于使用了ResizeObserver API导致的。ResizeObserver是一个用于监听元素大小变化的API,但是在某些情况下,它可能会导致循环调用,从而导致浏览器崩溃或者出现错误信息。在Vue项目中,这个错误通常是由于使用了element-plus中的el-table表格组件,并且在缩放浏览器网页时出现的。
解决这个问题的方法是在代码中加入一个防抖函数,将ResizeObserver的回调函数包裹起来,从而减少循环调用的次数。具体的代码实现可以参考引用中提供的方法。
相关问题
vue报错ResizeObserver loop completed with undelivered notifications.
这个错误通常是由于使用 ResizeObserver 监听元素尺寸变化时,出现了循环调用的情况。这可能是由于在回调函数中修改了元素的尺寸,导致 ResizeObserver 不断地触发回调函数,从而形成了循环调用。解决这个问题的方法是在回调函数中避免修改元素的尺寸,或者使用 debounce 或 throttle 函数来限制回调函数的执行频率。此外,还可以考虑使用其他的尺寸监听方式,比如监听 window 的 resize 事件或者使用 CSS 的 media query。
vue2 resizeobserver loop completed with undelivered notifications.
根据提供的引用内容,解决"vue2 resizeobserver loop completed with undelivered notifications"错误的方法如下:
1. 使用防抖函数:
```javascript
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);
}
}
```
2. 重写ResizeObserver类:
```javascript
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) {
callback = debounce(callback, 16);
super(callback);
}
}
```
3. 在需要使用ResizeObserver的地方添加show-overflow-tooltip属性:
```html
<el-table-column prop="title" label="标题" min-width="100" show-overflow-tooltip />
```
这些方法可以解决"vue2 resizeobserver loop completed with undelivered notifications"错误。