環(huán)境:Vue3+Element Plus
使用了 Table 表格后镐牺,第一次刷新打開頁面時密末,會報錯resizeobserver loop completed with undelivered notifications.
報錯原因:無法在一個瀏覽器幀中傳遞所有的通知翻伺,因?yàn)樗鼈冃枰奶幚頃r間比幀的剩余時間更長马靠。這通常發(fā)生在被觀察元素的尺寸變化導(dǎo)致了一連串的回調(diào)函數(shù)被調(diào)用時卷拘。
看了很多解決方案笆制,覺得使用 lodash 方案比較適合我的場景,因?yàn)閘odash里面有很多可以使用的到的函數(shù)糯累。
官方介紹
Lodash 通過降低 array算利、number、objects寇蚊、string 等等的使用難度從而讓 JavaScript 變得更簡單笔时。 Lodash 的模塊化方法 非常適用于:
- 遍歷 array、object 和 string
- 對值進(jìn)行操作和檢測
- 創(chuàng)建符合功能的函數(shù)
使用方法:
//瀏覽器環(huán)境:
<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>