Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，同时使用destroy-on-close，导致关闭 dialog 时浏览器卡死问题

最近在老项目，Vue2 项目里，使用 Element 的 dialog 里嵌套 tabs，同时使用destroy-on-close，导致关闭 dialog 时浏览器卡死问题，问了度娘，说是ui和vue的版本不匹配，但老项目又不好都重新升级，然后其它什么在tabs外包一层el-row什么的也没用，最后问了chatgpt解决了，哈哈哈哈哈

/*这个问题可能是由于 Vue2 和 Element UI 的组件在销毁时出现了问题。当关闭 dialog 时，可能没有正确地销毁内部的 tabs 组件，导致浏览器卡死。为了解决这个问题，你可以尝试以下方法：
使用 v-if 而不是 v-show 控制 dialog 的显示和隐藏。这样可以确保在关闭 dialog 时，内部的 tabs 组件会被正确地销毁。
*/

html
Copy code
<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible">
  <el-tabs>
    <!-- your tabs content -->
  </el-tabs>
</el-dialog>
<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible">
  <el-tabs>
    <!-- your tabs content -->
  </el-tabs>
</el-dialog>

/*在关闭 dialog 时，手动销毁内部的 tabs 组件。你可以在 dialog 的 @close 事件中触发一个方法，然后在该方法中销毁 tabs 组件。*/

html
Copy code
<el-dialog :visible.sync="dialogVisible" @close="handleClose">
  <el-tabs ref="tabs">
    <!-- your tabs content -->
  </el-tabs>
</el-dialog>
<el-dialog :visible.sync="dialogVisible" @close="handleClose">
  <el-tabs ref="tabs">
    <!-- your tabs content -->
  </el-tabs>
</el-dialog>


javascript
Copy code
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$nextTick(() => {
        this.$refs.tabs.$destroy();
      });
    }
  }
};
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$nextTick(() => {
        this.$refs.tabs.$destroy();
      });
    }
  }
};

/*如果上述方法仍然无法解决问题，你可以尝试升级 Vue 和 Element UI 到最新版本，看看是否有相关的 bug 修复。
*/

以上是gpt的回答，我用了v-if="dialogVisible"就可以了