vue3中使用tabs出现页面ResizeObserver loop limit exceeded异常怎么解决

这个异常通常是由于页面中某个元素的ResizeObserver回调函数在执行时又改变了页面元素的大小，从而触发了ResizeObserver的回调函数，进入了一个死循环，导致异常的出现。

在Vue3中使用tabs时，通常是通过动态切换多个子组件来实现的，而每个子组件都有可能会触发ResizeObserver回调函数。因此，为了避免出现上述异常，可以尝试以下几个方法：

1. 在每个子组件的销毁钩子中，手动断开ResizeObserver的观察器。例如：

export default {
  mounted() {
    const observer = new ResizeObserver(this.handleResize);
    observer.observe(this.$el);
    this.observer = observer;
  },
  beforeUnmount() {
    this.observer.disconnect();
  },
  methods: {
    handleResize() {
      // 处理元素大小变化
    }
  }
}

这样，每次切换到一个新的子组件时，旧的子组件会被销毁，同时也会断开其ResizeObserver的观察器，避免回调函数的死循环。

2. 在使用tabs的父组件中，只渲染当前选中的子组件，其他子组件则不渲染。例如：

<template>
  <div>
    <div class="tab-header">
      <!-- 渲染tab头部 -->
    </div>
    <div class="tab-content">
      <component :is="currentTab"></component>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentTab: 'tab1'
    }
  }
  // ...
}
</script>

这样，每次切换到一个新的子组件时，旧的子组件会被销毁，同时也不会触发其ResizeObserver的回调函数。

3. 使用第三方组件库中的tabs组件，例如ElementUI、Ant Design等，这些组件库通常已经考虑了ResizeObserver的问题，并且提供了可靠的解决方案。

以上是几种解决方案，具体选择哪一种取决于业务需求和开发成本。