element destroy-on-close属性使用踩坑

Posted 2023-02-28

参考技术A

我们使用element时免不了会使用dialog，使用dialog免不了需要在dialog关闭的时候销毁dialog的元素(比如表单重置和清除表单的校验结果)，翻一翻官方文档，发现了 destroy-on-close 这个属性，确实是好用，不过坑也挺多的，下面做一个总结：

1.使用 destroy-on-close 属性时，最好封装成一个组件，dialog的数据都维护在该组件中

我们在开发中是不是经常这样做呢？同时我们发现了 destroy-on-close 这个属性，于是自信的加上，一测试，但是发现没有作用，换个用法，我们往dialog里面插入 组件 试试：

我们传入一个 test 组件，测试，你会发现这是有作用的，重新关闭组件和打开组件组件的元素确实销毁了。

翻翻官方文档，文档上是这样写：

可是我们第一个例子确实传入的是元素啊，只能去看一下dialog的源码了。

我们只看关于 destroy-on-close 的属性的部分：

其实，在这里我们已经可以看出一些端倪了，element是基于vue的UI库，vue中通过key作为组件的唯一标识，一旦key更新，就会触发组件的更新。但是dialog的数据是维护dialog的父组件中，而 destroy-on-close 属性是销毁dialog组件及其子元素。

2.使用 destroy-on-close 后避免在组件的生命周期函数中发请求

这里指的是数据基本不会变的请求，打开页面只用发起一次就够了，如果你在使用了 destroy-on-close 的组件中的 created 中发起请求，当你关闭弹窗时，由于会触发key的更新，所以此时也会发请求，造成不必要的资源浪费。

3.替代方案
3.1 使用 destroy-on-close 的情况下，对于数据量不会变的请求，放到dialog同级的页面发请求，再传值到dialog的组件
3.2 使用 v-if 代替 destroy-on-close

总结
1.能不用 destroy-on-close 就不用，使用 v-if 替代
2.一定要用，注意传入的是组件，并且注意dialog的关闭事件，会触发组件的生命周期。