我们使用element时免不了会使用dialog，使用dialog免不了需要在dialog关闭的时候销毁dialog的元素(比如表单重置和清除表单的校验结果)，翻一翻官方文档，发现了destroy-on-close这个属性，确实是好用，不过坑也挺多的，下面做一个总结：
1.使用destroy-on-close属性时，最好封装成一个组件，dialog的数据都维护在该组件中
<div class="dialog-box">
<el-dialog
title="dialogA"
destroy-on-close
:visible.sync="showAddRecord"
width="40%">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
我们在开发中是不是经常这样做呢？同时我们发现了destroy-on-close这个属性，于是自信的加上，一测试，但是发现没有作用，换个用法，我们往dialog里面插入组件试试：
<div class="dialog-box">
<el-dialog
title="dialogB"
destroy-on-close
:visible.sync="showAddRecord"
width="40%">
<test></test> // 传入一个组件
</el-dialog>
</div>
我们传入一个test组件，测试，你会发现这是有作用的，重新关闭组件和打开组件组件的元素确实销毁了。
翻翻官方文档，文档上是这样写：
可是我们第一个例子确实传入的是元素啊，只能去看一下dialog的源码了。
我们只看关于destroy-on-close的属性的部分：
<template>
<transition
name="dialog-fade"
@after-enter="afterEnter"
@after-leave="afterLeave">
<div
v-show="visible"
class="el-dialog__wrapper"
@click.self="handleWrapperClick">
<div
role="dialog"
:key="key" // 注意这里的key是触发destroy-on-close属性的关键
aria-modal="true"
:aria-label="title || 'dialog'"
:class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
ref="dialog"
:style="style">
<div class="el-dialog__header">
<slot name="title">
<span class="el-dialog__title">{{ title }}</span>
</slot>
<button
type="button"
class="el-dialog__headerbtn"
aria-label="Close"
v-if="showClose"
@click="handleClose">
<i class="el-dialog__close el-icon el-icon-close"></i>
</button>
</div>
<div class="el-dialog__body" v-if="rendered"><slot></slot></div>
<div class="el-dialog__footer" v-if="$slots.footer">
<slot name="footer"></slot>
</div>
</div>
</div>
</transition>
</template>
<script>
import Popup from 'element-ui/src/utils/popup';
import Migrating from 'element-ui/src/mixins/migrating';
import emitter from 'element-ui/src/mixins/emitter';
export default {
name: 'ElDialog',
mixins: [Popup, emitter, Migrating],
props: {
title: {
type: String,
default: ''
},
modal: {
type: Boolean,
default: true
},
modalAppendToBody: {
type: Boolean,
default: true
},
appendToBody: {
type: Boolean,
default: false
},
lockScroll: {
type: Boolean,
default: true
},
closeOnClickModal: {
type: Boolean,
default: true
},
closeOnPressEscape: {
type: Boolean,
default: true
},
showClose: {
type: Boolean,
default: true
},
width: String,
fullscreen: Boolean,
customClass: {
type: String,
default: ''
},
top: {
type: String,
default: '15vh'
},
beforeClose: Function,
center: {
type: Boolean,
default: false
},
destroyOnClose: Boolean // 这里定义了destroy-on-close这个属性
},
data() {
return {
closed: false,
key: 0
};
},
watch: {
visible(val) {
if (val) {
this.closed = false;
this.$emit('open');
this.$el.addEventListener('scroll', this.updatePopper);
this.$nextTick(() => {
this.$refs.dialog.scrollTop = 0;
});
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
} else {
this.$el.removeEventListener('scroll', this.updatePopper);
if (!this.closed) this.$emit('close');
if (this.destroyOnClose) { // 有这个属性，就触发key的更新
this.$nextTick(() => {
this.key++;
});
}
}
}
},
computed: {
style() {
let style = {};
if (!this.fullscreen) {
style.marginTop = this.top;
if (this.width) {
style.width = this.width;
}
}
return style;
}
},
methods: {
getMigratingConfig() {
return {
props: {
'size': 'size is removed.'
}
};
},
handleWrapperClick() {
if (!this.closeOnClickModal) return;
this.handleClose();
},
handleClose() {
if (typeof this.beforeClose === 'function') {
this.beforeClose(this.hide);
} else {
this.hide();
}
},
hide(cancel) {
if (cancel !== false) {
this.$emit('update:visible', false);
this.$emit('close');
this.closed = true;
}
},
updatePopper() {
this.broadcast('ElSelectDropdown', 'updatePopper');
this.broadcast('ElDropdownMenu', 'updatePopper');
},
afterEnter() {
this.$emit('opened');
},
afterLeave() {
this.$emit('closed');
}
},
mounted() {
if (this.visible) {
this.rendered = true;
this.open();
if (this.appendToBody) {
document.body.appendChild(this.$el);
}
}
},
destroyed() {
// if appendToBody is true, remove DOM node after destroy
if (this.appendToBody && this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el);
}
}
};
</script>
其实，在这里我们已经可以看出一些端倪了，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的关闭事件，会触发组件的生命周期。
