ResizeObserver loop completed wi

Vue

ResizeObserver loop completed with undelivered notifications.
at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)

ResizeObserver loop completed with undelivered notifications 这个警告信息通常表示 ResizeObserver 在其回调函数中花费了太多时间，导致浏览器无法及时传递所有的尺寸变化通知。这可能是因为回调函数执行了复杂的计算或耗时的操作，使得浏览器无法及时响应其他的尺寸变化。

在编写使用 ResizeObserver 的代码时，你应该确保回调函数尽可能高效，避免执行耗时的任务。如果需要在回调函数中执行复杂的逻辑，你可以考虑使用异步操作（如 setTimeout 或 requestAnimationFrame）来延迟执行，以避免阻塞浏览器的事件循环。

以下代码解释了如何避免这个问题：

<template>  
  <div ref="resizableElement">  
    <!-- 组件内容 -->  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      resizeObserver: null,  
    };  
  },  
  mounted() {  
    this.resizeObserver = new ResizeObserver(entries => {  
      // 使用 requestAnimationFrame 来异步处理尺寸变化逻辑  
      // 这样可以避免阻塞事件循环  
      requestAnimationFrame(() => {  
        entries.forEach(entry => {  
          const { width, height } = entry.contentRect;  
            
          // 在这里编写处理尺寸变化的逻辑  
          console.log('Element resized:', width, height);  
            
          // 更新组件状态或其他操作  
          this.updateComponentStateBasedOnSize(width, height);  
        });  
      });  
    });  
      
    // 开始观察尺寸变化  
    this.resizeObserver.observe(this.$refs.resizableElement);  
  },  
  beforeUnmount() {  
    // 组件卸载前断开观察器连接  
    if (this.resizeObserver) {  
      this.resizeObserver.disconnect();  
    }  
  },  
  methods: {  
    updateComponentStateBasedOnSize(width, height) {  
      // 更新组件状态或其他操作  
      // 确保这些操作不会阻塞事件循环  
      this.newWidth = width;  
      this.newHeight = height;  
    }  
  },  
};  
</script>

在这个修改后的代码中，我使用了 requestAnimationFrame 来异步执行处理尺寸变化的逻辑。requestAnimationFrame 会告诉浏览器你希望执行一个动画，并请求浏览器在下一次重绘之前调用指定的回调函数来更新动画。这通常用于创建平滑的动画效果，但也可以用于任何需要在下一个渲染周期中执行的任务，以避免阻塞。

通过将处理尺寸变化的逻辑放在 requestAnimationFrame 的回调函数中，你可以确保浏览器有足够的时间来处理其他事件和尺寸变化通知，从而避免 ResizeObserver loop completed with undelivered notifications 的警告。

此外，你还需要确保 updateComponentStateBasedOnSize 方法中的操作不会过于复杂或耗时。如果确实需要执行复杂的逻辑，你可以考虑将其分解为更小的部分，或者使用 Web Workers 在后台线程中执行这些操作。

总之，要避免 ResizeObserver 的警告信息，你需要确保回调函数的执行尽可能高效，并避免阻塞浏览器的事件循环。