如图,在窗口化浏览器时报错 ResizeObserver loop completed with undelivered notifications.
版本
vue: 2.6.14
element-ui: 2.15.3
报错可能的原因:在页面绘制的时候,页面突然发生调整大小的事件,导致了样式和布局需重新评估,这个调整大小导致的布局变化,将延迟到下一帧来绘制。这个延迟会导致在下一个调整大小事件发生时上一个事件还没有处理完成,进而引发报错。
解决方法:
在App.vue的<script>中加入如下代码
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下完整代码
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
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);
}
}
export default {
data() {
return {
}
}
}
</script>
<style></style>