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,  // 初始为nulltab2Content: 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>