【Bug】ERROR ResizeObserver loop completed with undelivered notifications.
报错如下：
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)
报错的原因：在页面绘制的时候，页面突然发生调整大小的事件，导致了样式和布局都需要重新评估，这个调整大小导致的布局变化，将延迟到下一帧来绘制。
解决方案：
在App.vue文件中添加以下代码：
<script >
// 解决ERROR ResizeObserver loop completed with undelivered notifications.
//问题的
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);
};
};
// 解决ERROR ResizeObserver loop completed with undelivered notifications.
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
constructor(callback) {
callback = debounce(callback, 16);
super(callback);
}
};
</script>
下面是对这个代码的解释：
首先，debounce函数用于限制一个函数的执行频率，确保在一定时间间隔内只执行一次。它接受两个参数，一个是要执行的函数fn，另一个是延迟时间delay。函数内部使用setTimeout来实现延迟执行，每次调用时会清除之前的定时器，然后设置一个新的定时器来延迟执行目标函数。
接下来，代码对window.ResizeObserver进行了扩展。它将原始的ResizeObserver保存为_ResizeObserver，然后定义了一个新的ResizeObserver类，重写了其构造函数。在新的构造函数中，传入的回调函数被用debounce函数处理，确保回调函数在16毫秒的间隔内执行一次。这样做是为了限制ResizeObserver的回调频率，以避免过多的触发，提高性能。
这段代码实现了对ResizeObserver的改写，通过限制回调函数的执行频率来优化性能。
通过调整回调频率能解决上面讲解的问题报错原因。
