uniapp 自定义tabBar切换组件 频繁创建的问题

			
		<!-- 中间内容组件部分 -->
		<view class="center-container" :style="{'marginTop':`${SystemInfo.titleBarHeight}+${SystemInfo.titleBarHeight}px`}">
			<view v-show="currentIndex == 0" v-if="ifList.includes(0)">
				<index name="index"></index>
			</view>
			<view  v-show="currentIndex == 1" v-if="ifList.includes(1)">
				<category name="category"></category>
			</view>
			<view v-show="currentIndex == 2" v-if="ifList.includes(2)">
				<cart name="cart"></cart>
			</view>
		</view>

          <!-- 底部自定义tabBar -->
		<view class="tabbar_container">
			<tabBar>
				<view v-for="(item,index) in tabBarList" :key="index"  @click="changeStyle(index)" >
					<tabBarItem :title="item.title" :icon="item.icon" :currentIcon="item.currentIcon"  :current="currentIndex == index ? true : false"></tabBarItem>
				</view>
			</tabBar>
		</view>





		data() {
			return {
				currentIndex:0,
				ifList:[0],
				tabBarList:[
					{
						title:"首页",
						icon:"/static/tab-home.png",
						currentIcon:'/static/tab-home-current.png',
					},
					{
						title:"分类",
						icon:"/static/tab-cate.png",
						currentIcon:'/static/tab-cate-current.png',
					},
					{
						title:"购物车",
						icon:"/static/tab-cart.png",
						currentIcon:'/static/tab-cart-current.png',
					}
				],
				bgcolor:'white',
				opacity:1
			}
		},

		methods: {
			changeStyle(index){
				console.log(index,"这里是传过来的数据");
				this.currentIndex = index;
				if(!this.ifList.includes(index)){
					this.ifList.push(index);
					console.log(this.ifList,'这里是ifList的数据')
				}
			},
		},

一开始我是用的v-if来选择 切换组件的方法，但是v-if每次切换都会导致组件重新加载 后来又想到了v-show来当做切换组件的方法 v-show会一开始就加载所有的组件 这显然也是不合理的 

后来通过百度 然后发现了这种方法 v-show 和 v-if结合起来， 这样就达到了 点击第一次的时候会创建组件，后续点击同一组件不会在重新加载。