环境:Vue3+Element Plus
使用了 Table 表格后,第一次刷新打开页面时,会报错resizeobserver loop completed with undelivered notifications.
报错原因:无法在一个浏览器帧中传递所有的通知,因为它们需要的处理时间比帧的剩余时间更长。这通常发生在被观察元素的尺寸变化导致了一连串的回调函数被调用时。
看了很多解决方案,觉得使用 lodash 方案比较适合我的场景,因为lodash里面有很多可以使用的到的函数。
官方介绍
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于:
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
使用方法:
//浏览器环境:
<script src="lodash.js"></script>
//通过 npm:
$ npm i -g npm
$ npm i --save lodash
在App.vue中加入以下代码
<script lang="ts" setup>
import { debounce } from "lodash";
const _ = (window as any).ResizeObserver;
(window as any).ResizeObserver = class ResizeObserver extends _ {
constructor(callback: (...args: any[]) => void) {
callback = debounce(callback, 100);
super(callback);
}
};
</script>