vue2 - 重置 data

1. 介绍

有些组件不能销毁，但每次调用都需要重置 data

可以通过 Object.assign(this.$data, this.$options.data.apply(this)); 来给 data 重新赋初始值。

2. 示例

<template>
  <div>...</div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
    }
  },

  model: {
    prop: 'visible',
    event: 'update-visible',
  },

  watch: {
    visible(value) {
      if (!value) {
        this.close();
      }
    }
  },

  method() {
    close() {
      this.reset();
    },

    reset() {
      Object.assign(this.$data, this.$options.data.apply(this));
    },
  },
}
</script>

3. 注意

建议使用 v-if 来销毁（重置）数据，特别是内嵌式的 H5 页面。

示例：

<template>
  <div class="box">

    <ImagePreview 
      v-model="visible"
      v-if="visible"
    />

  </div>
</template>

4. 参考

• Is there a proper way of resetting a component's initial data in vuejs? (opens new window)