关于使用vant的tab切换结合动态组件:is后出现生命周期叠加——生命周期方法多次调用的问题

关于使用vant的tab切换加动态组件:is后出现生命周期叠加——生命周期方法多次调用的问题

原代码

 <van-tabs v-model:active="active" swipeable @change="tabChange">
      <van-tab v-for="(item, index) in tabs" :key="index">
        <template #title>{{ item.title }} </template>
        <component
          :is="componentShow"
          :detail="detail"
          :loading="loading"
          @updateDetail="updateDetail"
          @changeActiveComponent="changeActiveComponent"
        ></component>
      </van-tab>
    </van-tabs>

 

 所以判断为组件没有被销毁，生命周期没有被及时释放导致

 起初为了不耽误开发进度，直接不使用动态组件

 <van-tabs v-model:active="active" :swipeable="active != 4">
      <van-tab>
        <template #title>舆情 </template>
        <Component0
          :detail="detail"
          :loading="loading"
          @updateDetail="updateDetail"
          @changeActiveComponent="changeActiveComponent"
        ></Component0>
      </van-tab>
      <van-tab>
        <template #title>处置日志 </template>
        <HandleLog :detail="detail"></HandleLog>
      </van-tab>
      <van-tab>
        <template #title>审批 </template>
        <Approval :detail="detail"></Approval>
      </van-tab>
      <van-tab>
        <template #title>脉络 </template>
        <Venation :detail="detail"></Venation>
      </van-tab>
      <van-tab>
        <template #title>进程 </template>
        <Process :detail="detail"></Process>
      </van-tab>
      <van-tab>
        <template #title>事实情况 </template>
        <Fact :detail="detail"></Fact>
      </van-tab>
    </van-tabs>

后续进行优化改进发现了导致问题的原因

下方是改进后的代码，把动态组件位置从tab切换组件里面改为外面，成功解决问题

 

   <van-tabs v-model:active="active" swipeable @change="tabChange">
      <van-tab v-for="(item, index) in tabs" :key="index">
        <template #title>{{ item.title }} </template>
      </van-tab>
    </van-tabs>
    <component
      :is="componentShow"
      :detail="detail"
      :loading="loading"
      @updateDetail="updateDetail"
      @changeActiveComponent="changeActiveComponent"
    ></component>