ResizeObserver loop limit exceeded报错解决方案

前言:

控制台没有报错,但是开发Vue项目过程中一直报ResizeObserver loop limit exceeded 错,找到以下解决方式。在main.js文件中重写 ResizeObserver方法。

main.js文件 (完整版)

javascript 复制代码
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
};

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
};

createApp(App)
  .use(ElementPlus, {
    locale: zhCn,
  })
  .use(store)
  .use(router)
  .mount("#app");
相关推荐
七烦10 小时前
vue3 + springboot实现微信登录
vue·springboot·微信公众号
ZKf30FkG2 天前
理解 package.json 中的版本控制:“nuxt“: “3.16.0“ vs “nuxt“: “^3.16.0“ 的深层差异
vue
海的诗篇_2 天前
前端开发面试题总结-vue2框架篇(二)
前端·javascript·css·vue.js·前端框架·vue
伍哥的传说3 天前
Vue3 响应式翻牌抽奖游戏
javascript·vue.js·游戏·前端框架·vue·交互
胡斌附体4 天前
vue父子组件通信的使用, 跟新v-model
vue·v-model·使用场景·emit·子父组件通信·change事件
「、皓子~4 天前
AI创作系列(2):UniApp跨端开发实战 - 海狸IM移动端完全由AI编写
开发语言·人工智能·uni-app·开源·vue·开源软件·ai编程
sunshine_程序媛4 天前
在Vue2项目中引入ElementUI详细步骤
前端·ui·elementui·前端框架·vue
努力了吗梁同学5 天前
Nuxt3 中使用 pnpm 安装的 NuxtImg 使用会提示找不到图片
前端·vue·pnpm·nuxt·nuxtimg
sg_knight5 天前
Rollup vs Webpack 深度对比:前端构建工具终极指南
前端·javascript·webpack·node.js·vue·rollup·vite
二倍本贝5 天前
【慧游鲁博】【12】小程序端 · 智能导览对接后端文物图片识别功能
小程序·uni-app·vue·软件工程