ResizeObserver loop completed with undelivered notifications

Question

今天搭了一个前端vue工程，按F12进去看控制台日志，没有异常情况，前端页面也没有报错，但是当我取消F12的时候（就是关闭开发者模式的时候），前端界面突然报了如下错误：ResizeObserver loop completed with undelivered notifications，请问这应该这么解决呢？

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

这个错误是由于ResizeObserver观察器在循环过程中产生了未发送的通知导致的。这通常是由于在元素大小改变时更新了DOM结构，从而导致重新计算元素大小的循环触发。

要解决这个问题，你可以尝试以下几个方法：

1. 使用debounce或throttle函数来限制ResizeObserver的触发频率，以避免过于频繁的调用。

2. 检查代码中是否有无限循环的情况，例如元素的大小变化引起了更新，而更新又导致了元素大小的变化，从而形成了一个死循环。

3. 检查代码中是否存在多次触发元素大小变化的情况，例如监听了多个事件（如resize、transitionend等）或使用了多个ResizeObserver观察器。

4. 确保在元素被销毁之前，及时取消ResizeObserver的观察。

这些方法都是常见的解决方案，你可以根据具体情况选择适合的方法来解决这个问题。