工作中遇到了一个需求，tab个数要根据页面的大小动态变化，研究了下，分享下：

import { useResizeObserver } from '@vueuse/core';const tabRef = ref();const getData = (el) => {if (!el || !el?.length) return;console.log('el[0].contentRect.width',el[0].contentRect.width);//根据宽度改变tab个数//业务逻辑代码不写了
};watch(() => tabRef.value,(value) => {if (value) {useResizeObserver(tabRef.value?.$el, getData);}}
);

逻辑是当页面初始化后，tab的ref对象监听到有数据了，就调用vue的useResizeObserver方法来绑定，如果tab大小变了，就会调用getData方法，具体操作逻辑不写了，就写了个console,可以看下打印的就是tab的宽度。