首页vue3+vite报错 Uncaught ResizeObserver loop completed with undelivered notifications.

vue3+vite报错 Uncaught ResizeObserver loop completed with undelivered notifications.

时间: 2025-02-08 21:11:08 浏览: 244

### 解决 Vue3 和 Vite 项目中的 `ResizeObserver` 错误当在 Vue3 和 Vite 构建的应用程序中遇到 `ResizeObserver loop completed with undelivered notifications` 的错误时，可以通过修改全局的 `ResizeObserver` 实现来缓解这一问题。以下是具体的解决方案： #### 修改 `App.vue` 为了减少由于频繁触发而引起的性能问题以及避免未处理的通知堆积，在应用程序入口文件或主要组件内重写 `window.ResizeObserver` 可以有效解决问题。 ```javascript // 在 <script setup> 或普通的 <script> 中引入防抖函数并覆盖原生 ResizeObserver const debounce = (fn, delay) => { let timer; return (...args) => { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn(...args); }, delay); }; }; if (typeof window !== 'undefined') { const _ResizeObserver = window.ResizeObserver; window.ResizeObserver = class ResizeObserver extends _ResizeObserver { constructor(callback) { super(debounce(callback, 100)); // 使用更长一点的时间间隔比如100ms可以更好地防止抖动[^2] } }; } ``` 上述代码通过给回调函数增加了一个简单的防抖机制，使得即使目标元素尺寸发生变化，实际执行观察者逻辑之前也会等待指定时间（这里设置为100毫秒），从而减少了不必要的计算次数和潜在的风险。对于某些场景下可能还需要调整这个延时时长至更低值如16ms以便获得更好的响应速度但同时保持稳定性的平衡[^3]。另外值得注意的是如果是在开发环境中遇到了此警告信息，则可能是由 Webpack HMR(热模块替换)或其他原因引起；而在生产环境下通常不会影响应用正常运行。不过按照以上方式优化后应该能够消除该类告警消息[^4]。

阅读全文