背景：
一个el-dialog被复用了三次（偷懒），然后第一个用途改数据后，切换第二个用途，控制台报错
Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."
......
原因：
基本上很多文章都说了原因所在，无非就是“DOM操作不正确导致的”，进一步说很多都是因为v-if惹的祸
解决方案：
为el-dialog添加了:destroy-on-close="true"，该方法关闭对话框时会销毁对话框的 DOM 元素。这意味着每次打开对话框时都会重新创建对话框的 DOM 结构，从而避免了之前提到的可能导致报错的 DOM 结构变化问题。
注意：
值得一提的是，这个方法是存在弊端的（一下为GPT的回答）：
1、重新创建DOM结构：每次打开对话框时都会销毁对话框的DOM元素，并重新创建。这可能会导致一些额外的开销，特别是对于包含大量内容或复杂组件的对话框。（客户端的事情雨我无瓜，反正不是消耗服务器性能）
2、组件状态丢失：由于对话框每次打开时都会重新创建，会导致组件的状态丢失。例如，如果在对话框中有一个表单，用户填写了一部分内容，然后关闭对话框，再次打开时，之前填写的内容将丢失。（这个确实是个问题，比如误触了el-dialog外的地方，之前填的数据会丢失）
3、重新渲染：每次重新创建对话框的DOM结构时，都会触发对应组件的重新渲染。这可能会导致组件中的数据或计算属性等被重新计算，带来一定的性能开销。（同上，客户端的事情雨我无瓜）
对于第二个问题，解决方案也很简单，添加:before-close，需要调用的方法代码示例如下：
handleBeforeClose(done) {
this.$confirm('确认关闭对话框吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
done(); // 关闭对话框
})
.catch(() => {
// 取消关闭对话框
});
},
