ResizeObserver loop completed with undelivered notifications. at handleError (webpack-internal:/

最新推荐文章于 2025-04-29 15:51:39 发布

鱼鱼鱼BOL

最新推荐文章于 2025-04-29 15:51:39 发布

阅读量914

点赞数 10

文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/only_learn/article/details/138295369

版权

本文介绍了如何在Vue3项目中使用debounce函数处理窗口大小调整事件，以及如何结合VueRouter和ResizeObserver确保组件在初次渲染和窗口变化时的高效响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境：vue3+ts arco design

解决办法

在app.vue中增加

const debounce = (fn: any, delay: any) => {
  let timer: any;
  return (...args: any) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};
const resizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends resizeObserver {
  constructor(callback: any) {
    callback = debounce(callback, 200);
    super(callback);
  }
};

完整代码：

<template>
  <div id="app">
    <template v-if="route.path.startsWith('/user')">
      <router-view></router-view>
    </template>
    <template v-else>
      <BasicLayout></BasicLayout>
    </template>
  </div>
</template>
<script setup lang="ts">
import BasicLayout from "@/layouts/BasicLayout.vue";
import { onMounted } from "vue";
import { useRoute } from "vue-router";

const debounce = (fn: any, delay: any) => {
  let timer: any;
  return (...args: any) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};
const resizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends resizeObserver {
  constructor(callback: any) {
    callback = debounce(callback, 200);
    super(callback);
  }
};

const route = useRoute();

//TODO 全局初始化，全局单次调用
const doInit = () => {
  console.log("hello,欢迎使用JOJ!");
};

onMounted(() => {
  doInit();
});
</script>
<style>
#app {
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

参考文档：vue + element plus：ResizeObserver loop completed with undelivered notifications-CSDN博客