背景：
一個el-dialog被復(fù)用了三次（偷懶）表鳍，然后第一個用途改數(shù)據(jù)后蝌诡，切換第二個用途矗晃，控制臺報錯
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操作不正確導(dǎo)致的”畦浓，進一步說很多都是因為v-if惹的禍
解決方案：
為el-dialog添加了:destroy-on-close="true"，該方法關(guān)閉對話框時會銷毀對話框的 DOM 元素检疫。這意味著每次打開對話框時都會重新創(chuàng)建對話框的 DOM 結(jié)構(gòu)讶请，從而避免了之前提到的可能導(dǎo)致報錯的 DOM 結(jié)構(gòu)變化問題。
注意：
值得一提的是屎媳，這個方法是存在弊端的（一下為GPT的回答）：
1夺溢、重新創(chuàng)建DOM結(jié)構(gòu)：每次打開對話框時都會銷毀對話框的DOM元素论巍，并重新創(chuàng)建。這可能會導(dǎo)致一些額外的開銷风响，特別是對于包含大量內(nèi)容或復(fù)雜組件的對話框嘉汰。（客戶端的事情雨我無瓜，反正不是消耗服務(wù)器性能）
2状勤、組件狀態(tài)丟失：由于對話框每次打開時都會重新創(chuàng)建鞋怀，會導(dǎo)致組件的狀態(tài)丟失。例如持搜，如果在對話框中有一個表單密似，用戶填寫了一部分內(nèi)容，然后關(guān)閉對話框朵诫，再次打開時辛友，之前填寫的內(nèi)容將丟失。（這個確實是個問題剪返，比如誤觸了el-dialog外的地方废累，之前填的數(shù)據(jù)會丟失）
3、重新渲染：每次重新創(chuàng)建對話框的DOM結(jié)構(gòu)時脱盲，都會觸發(fā)對應(yīng)組件的重新渲染邑滨。這可能會導(dǎo)致組件中的數(shù)據(jù)或計算屬性等被重新計算，帶來一定的性能開銷钱反。（同上掖看，客戶端的事情雨我無瓜）
對于第二個問題，解決方案也很簡單面哥，添加:before-close哎壳，需要調(diào)用的方法代碼示例如下：
handleBeforeClose(done) {
this.$confirm('確認關(guān)閉對話框嗎？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
done(); // 關(guān)閉對話框
})
.catch(() => {
// 取消關(guān)閉對話框
});
},
