el-tabs 切换时数据不更新的问题

最近业务需求，需要在页面中使用tabs，使用过程中出现tabs切换，数据不更新的问题，以下是思路和解决办法。

Vue 会追踪你在模板中绑定的数据，并在数据发生变化时重新渲染相应的部分。但在使用 el-tabs 时，有时切换 Tab 后，数据不会立即更新，原因是diff算法比对的过程红，会尽量复用dom节点，而vue的算法把切换前后的dom识别为同个dom，所以不更新。

为了确保 Tab 切换时能正确地触发重新渲染，我们要做的就是触发他的正确识别，然后正常渲染。

方法1：key 的使用

为 el-tabs 添加一个唯一的 key 属性。这样，当数据或组件改变时，Vue 将能够识别并重新渲染它。注意：key不要用index，最好是和业务相关的、动态生成的，防止前后key值一样达不到区分dom节点的目的。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane :label="'Tab 1'" :key="tab1Key">
      <!-- Tab 1 内容 -->
      <div>{{ tab1Content }}</div>
    </el-tab-pane>
    <el-tab-pane :label="'Tab 2'" :key="tab2Key">
      <!-- Tab 2 内容 -->
      <div>{{ tab2Content }}</div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1',
      tab1Key: 'tab1-' + Date.now(),
      tab2Key: 'tab2-' + Date.now(),
      tab1Content: null,  // 初始为null
      tab2Content: null,  // 初始为null
    };
  },
  methods: {
    
  },
  created() {
    
  },
};
</script>

方法2：强制更新

使用 Vue 的 $forceUpdate 方法来强制组件重新渲染。但这种方法并不推荐，因为它绕过了 Vue 的正常更新机制。

方法3：使用v-if进行显隐控制

v-if进行true-false的切换，会销毁该元素及其所有绑定的事件、数据、组件实例等，触发重新渲染。

缺点：如果频繁切换显隐，可能会带来性能开销。

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane :label="'Tab 1'" v-if="showTab1">
      <div>Tab 1 内容</div>
    </el-tab-pane>
    <el-tab-pane :label="'Tab 2'" v-if="showTab2">
      <div>Tab 2 内容</div>
    </el-tab-pane>
    <el-tab-pane :label="'Tab 3'" v-if="showTab3">
      <div>Tab 3 内容</div>
    </el-tab-pane>
  </el-tabs>

  <el-button @click="toggleTabs">切换Tab显示</el-button>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'Tab 1',
      showTab1: true,
      showTab2: false,
      showTab3: false
    };
  },
  methods: {
    toggleTabs() {
      // 控制 Tab 的显示与隐藏
      this.showTab1 = !this.showTab1;
      this.showTab2 = !this.showTab2;
      this.showTab3 = !this.showTab3;
    }
  }
};
</script>