vue3 多个tab自动切换时只有第一个tab的组件显示

首先有三个tab对应三个组件(BarChart)

const showTab1 = ref(true)
const showTab2 = ref(false)
const showTab3 = ref(false)
const data1 = ref({})
const tab1style = ref(active)
const tab2style = ref()
const tab3style = ref()
cnost tabnidex = ref()

<div class="tab" id="tab">
	<ul>
		<li><a :class="tab1style" @click.stop.prevent="tabClick(1)">xxx</a></li>
		<li><a :class="tab2style" @click.stop.prevent="tabClick(2)">yyy</a></li>
		<li><a :class="tab3style" @click.stop.prevent="tabClick(3)">zzz</a></li>
	</ul>
</div>
<div>
	<BarChart :id="chart1" :data="data1" v-show="showTab1"/>
	<BarChart :id="chart2" :data="data1" v-show="showTab2"/>
	<BarChart :id="chart3" :data="data1" v-show="showTab3"/>
</div>

1. 对于只有一个组件显示的问题，v-show是使用display:block/none来实现显示和隐藏的，因此初始化onMounted的时候只有显示为true的第一个组件加载了数据，而第二个和第三个组件都未加载数据，所以当切换到第二个和第三个tab的时候，这两个组件都是只有dom没有数据的，因此不会显示。
   Fix: 初始先给showTab1, showTab2和showTab3赋值为true，待其加载完成之后再赋值为false。

   const showTab1 = ref(true)
   const showTab2 = ref(true)
   const showTab3 = ref(true)
   onMounted(() => {
   	 data1.value = {}
   	showTab2.value = false
   	showTab3.value = false
   })
   

2. tab自动切换的实现
   首先实现一个tab点击方法：

   const tabClick = (index:any) => {
   	tabindex = index
   	if(index == 1){
   		tab1style.value = active
   		tab2style.value = ""
   		tab3style.value = ""
   		showTab1.value = true
   		showTab2.value = false
   		showTab3.value = false
   	｝
   	else if(index == 2){
   		tab1style.value = ""
   		tab2style.value = active
   		tab3style.value = ""
   		showTab1.value = false
   		showTab2.value = true
   		showTab3.value = false
   	｝
   	else if(index == 3){
   		tab1style.value = ""
   		tab2style.value = ""
   		tab3style.value = active
   		showTab1.value = false
   		showTab2.value = false
   		showTab3.value = true
   	｝
   }
   

   然后在onMounted方法中加入定时调用函数，定时调用点击tab方法，即可实现tab自动切换的效果。

   const timer = ref()
   onMounted(() => {
   	tabindex.value = 1
   	timer.value = setInterval(() => {
   		tabClick(tabIndex.value%4)
   		tabindex.value++
   		if(tabindex.value == 4)  tabindex.value = 1
   	}, 3000)
   })
   onUnmounted(()=> {
   	clearInterval(timer.value)
   }