Vue Bootstrap Tabs切换时mounted早于beforeDestroy异常问题咨询

• 该异常是<b-tab>的lazy属性与动态组件强制刷新逻辑冲突导致：
  1. BootstrapVue中<b-tab>的lazy属性作用为仅在tab首次被激活时渲染内部内容，渲染完成后切换tab仅控制内容的显示/隐藏，默认不会销毁已渲染的DOM和组件实例。
  2. 你在动态组件<component>上额外绑定了全局唯一的uniqueKey作为key，触发了Vue强制销毁重建组件的逻辑，而Vue的diff更新规则本身就是先挂载新key对应的组件实例，再销毁旧key对应的实例。
  3. 从tab-1切到tab-2时是首次渲染tab-2内容，销毁旧组件和渲染新组件的逻辑刚好重合，所以执行顺序符合预期；从tab-2切回tab-1时，lazy逻辑会优先触发tab-1内容的渲染，对应新组件先挂载，之后才会处理tab-2的隐藏和旧组件销毁，因此出现顺序异常。

根据业务需求选择对应方案即可：

方案1：保留tab内容缓存（推荐，性能更高） #

如果不需要每次切换tab都重新请求数据、渲染组件，直接移除动态组件上的:key="tab.uniqueKey"属性即可，lazy属性会保证tab首次激活才渲染内容，后续切换仅控制显示隐藏，不会重复触发mounted和destroy生命周期。
修复后代码：

<b-tabs v-model="tabIndex">
  <b-tab v-for="tab in tabs" :key="tab.key" lazy>
    <template v-slot:title> <i class="mr-1" :class="tab.icon"></i> {{ tab.name }} </template>
    <p class="mb-0">
      <component :is="tab.component" />
    </p>
  </b-tab>
</b-tabs>

tabs: [
  {key: 'tab-1', name: 'Tab 1', icon: 'fas fa-cogs', component: 'tabl-1'},
  {key: 'tab-2', name: 'Tab 2', icon: 'fas fa-cogs', component: 'tabl-2'}
]

方案2：每次切换tab都销毁重建组件 #

如果业务要求每次打开tab都重新初始化组件，直接移除<b-tab>上的lazy属性即可，此时Vue会严格按照「销毁旧组件→挂载新组件」的顺序执行生命周期。
修复后代码：

<b-tabs v-model="tabIndex">
  <b-tab v-for="tab in tabs" :key="tab.key">
    <template v-slot:title> <i class="mr-1" :class="tab.icon"></i> {{ tab.name }} </template>
    <p class="mb-0">
      <component :is="tab.component" :key="tab.uniqueKey" />
    </p>
  </b-tab>
</b-tabs>

内容的提问来源于stack exchange，提问作者user3351236