vue3怎么忽略resizeobserver loop limit exceeded报错

出现 "ResizeObserver loop limit exceeded" 报错是因为 ResizeObserver 监听器在某些情况下会被触发多次，导致浏览器性能出现问题。要解决这个问题，可以通过以下两种方法：

1. 在组件销毁时取消 ResizeObserver 监听器，避免监听器在组件销毁后仍然执行。

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    let resizeObserver = null;

    onMounted(() => {
      resizeObserver = new ResizeObserver(() => {
        // do something
      });
      resizeObserver.observe(document.body);
    });

    onUnmounted(() => {
      resizeObserver.disconnect();
    });
  }
};

2. 在监听器执行时加入防抖或节流函数，避免监听器频繁触发。

import { onMounted } from 'vue';
import { debounce } from 'lodash';

export default {
  setup() {
    const handleResize = debounce(() => {
      // do something
    }, 100);

    onMounted(() => {
      const resizeObserver = new ResizeObserver(handleResize);
      resizeObserver.observe(document.body);
    });
  }
};

以上两种方法都可以有效避免 "ResizeObserver loop limit exceeded" 报错。