VUE2关闭弹窗时销毁数据的方法

 在 Vue 2 中，如果希望在每次打开窗口时销毁之前打开窗口操作产生的数据，可以通过以下5种方式来实现：

1. 使用 beforeDestroy 或 beforeUnmount 钩子

在组件销毁前，可以在 beforeDestroy 或 beforeUnmount 钩子中手动清理数据。

export default {
  data() {
    return {
      formData: {},
      someState: null,
    };
  },
  beforeDestroy() {
    // 清理数据
    this.formData = {};
    this.someState = null;
  },
};

2. 使用 watch 监听窗口状态

如果是通过某个状态（如 isOpen）来控制窗口的显示与隐藏，可以使用 watch 监听这个状态的变化，并在窗口关闭时清理数据。

export default {
  data() {
    return {
      isOpen: false,
      formData: {},
    };
  },
  watch: {
    isOpen(newVal) {
      if (!newVal) {
        // 窗口关闭时清理数据
        this.formData = {};
      }
    },
  },
};

3. 使用 v-if 销毁组件

通过 v-if 指令，可以在窗口关闭时完全销毁组件，从而清除组件内的所有数据。

在 MyWindow 组件中，可以通过 $emit 触发 close 事件来关闭窗口。

4. 使用 reset 方法

可以在组件中定义一个 reset 方法，用于重置数据，并在每次打开窗口时调用该方法。

export default {
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    reset() {
      this.formData = {};
    },
  },
  mounted() {
    this.reset(); // 每次打开窗口时重置数据
  },
};

5. 使用 key 强制重新渲染组件

通过给组件绑定一个唯一的 key，可以在每次打开窗口时强制重新渲染组件，从而销毁之前的数据。