我們使用element時(shí)免不了會(huì)使用dialog，使用dialog免不了需要在dialog關(guān)閉的時(shí)候銷毀dialog的元素(比如表單重置和清除表單的校驗(yàn)結(jié)果)，翻一翻官方文檔，發(fā)現(xiàn)了destroy-on-close這個(gè)屬性，確實(shí)是好用，不過坑也挺多的，下面做一個(gè)總結(jié)：

1.使用destroy-on-close屬性時(shí)，最好封裝成一個(gè)組件，dialog的數(shù)據(jù)都維護(hù)在該組件中

<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>

我們?cè)陂_發(fā)中是不是經(jīng)常這樣做呢？同時(shí)我們發(fā)現(xiàn)了destroy-on-close這個(gè)屬性，于是自信的加上，一測(cè)試，但是發(fā)現(xiàn)沒有作用，換個(gè)用法，我們往dialog里面插入組件試試：

 <div class="dialog-box">
        <el-dialog
            title="dialogB"
            destroy-on-close
            :visible.sync="showAddRecord"
            width="40%">
          <test></test> // 傳入一個(gè)組件
        </el-dialog>
  </div>

我們傳入一個(gè)test組件，測(cè)試，你會(huì)發(fā)現(xiàn)這是有作用的，重新關(guān)閉組件和打開組件組件的元素確實(shí)銷毀了。

翻翻官方文檔，文檔上是這樣寫：

可是我們第一個(gè)例子確實(shí)傳入的是元素啊，只能去看一下dialog的源碼了。

我們只看關(guān)于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是觸發(fā)destroy-on-close屬性的關(guān)鍵
        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這個(gè)屬性
    },

    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) {  // 有這個(gè)屬性，就觸發(fā)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>

其實(shí)，在這里我們已經(jīng)可以看出一些端倪了，element是基于vue的UI庫，vue中通過key作為組件的唯一標(biāo)識(shí)，一旦key更新，就會(huì)觸發(fā)組件的更新。但是dialog的數(shù)據(jù)是維護(hù)dialog的父組件中，而destroy-on-close屬性是銷毀dialog組件及其子元素。

2.使用destroy-on-close后避免在組件的生命周期函數(shù)中發(fā)請(qǐng)求

這里指的是數(shù)據(jù)基本不會(huì)變的請(qǐng)求，打開頁面只用發(fā)起一次就夠了，如果你在使用了destroy-on-close的組件中的created中發(fā)起請(qǐng)求，當(dāng)你關(guān)閉彈窗時(shí)，由于會(huì)觸發(fā)key的更新，所以此時(shí)也會(huì)發(fā)請(qǐng)求，造成不必要的資源浪費(fèi)。

3.替代方案
3.1 使用destroy-on-close的情況下，對(duì)于數(shù)據(jù)量不會(huì)變的請(qǐng)求，放到dialog同級(jí)的頁面發(fā)請(qǐng)求，再傳值到dialog的組件
3.2 使用v-if代替destroy-on-close

總結(jié)
1.能不用destroy-on-close就不用，使用v-if替代
2.一定要用，注意傳入的是組件，并且注意dialog的關(guān)閉事件，會(huì)觸發(fā)組件的生命周期。