el-dialog destroy-on-close的坑(关闭弹窗时触发了子组件的mounted)

时间:2024-12-19 21:25:55

表现:

设置了destroy-on-close为true的一个el-dialog,在关闭时候,触发了子组件的mounted。

查找原因:

在element的源码中,找到了destroy-on-close的实现原理:
在这里插入图片描述
在这里插入图片描述
当visible改变为false,即关闭dialog的时候,如果用户设置了destroyOnClose=true,则执行key++;
key是绑定在较外层的div上的,key值的变化会导致这个div重新渲染。

所以我们知道了,设置destroyOnClose=true并不会如同element官方文档描述的这样
在这里插入图片描述
而是刷新dialog内部的元素。
这属于是element官方文档措辞不严谨的问题。

解决:

如果你的需求只是销毁dialog中的元素,那么拉黑该属性,改用v-if。