Vue3 - ResizeObserver loop completed with undelivered notifications（ResizeObserver loop limit excee）

根据引用中提供的代码，您可以在App.vue或main.js文件中添加代码来解决Vue3中的ResizeObserver loop completed with undelivered notifications（ResizeObserver loop limit exceeded）问题。首先，在script标签中将代码添加到App.vue文件中。然后，在app挂载完成之后，将代码添加到main.js文件中。这段代码定义了一个debounce函数和一个重写的ResizeObserver类，该类在构造函数中使用debounce函数对回调函数进行了节流处理。

引用提到了vue-response-components使用ResizeObserver创建响应组件的想法。如果您想了解更多关于vue-response-components的信息，您可以查看作者在ITNEXT上的帖子。

因此，通过在App.vue和main.js中添加提供的代码，您可以解决Vue3中的ResizeObserver loop completed with undelivered notifications问题。

相关问题

vue2 resizeobserver loop completed with undelivered notifications.

根据提供的引用内容，解决"vue2 resizeobserver loop completed with undelivered notifications"错误的方法如下：

1. 使用防抖函数：

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);
  }
}

2. 重写ResizeObserver类：

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

3. 在需要使用ResizeObserver的地方添加show-overflow-tooltip属性：

<el-table-column prop="title" label="标题" min-width="100" show-overflow-tooltip />

这些方法可以解决"vue2 resizeobserver loop completed with undelivered notifications"错误。

vue2项目ResizeObserver loop completed with undelivered notifications

根据提供的引用内容，可以得知在Vue2项目中使用ResizeObserver时可能会出现“ResizeObserver loop completed with undelivered notifications”的错误。这是因为ResizeObserver在监听元素大小变化时可能会出现循环调用的情况，导致浏览器性能下降。为了解决这个问题，可以使用防抖函数对ResizeObserver进行优化。

以下是一个解决方案：

1. 在main.ts文件中引入防抖函数debounce：

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

2. 在main.ts文件中重写ResizeObserver类：

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

这样就可以解决“ResizeObserver loop completed with undelivered notifications”的问题了。