Vue 中如何重置data?

在 Vue 中重置 data 有两种常用方式，可以全部恢复到初始值，也可以只改部分字段。

1. 全部重置到初始值

Vue 组件的 data 是一个函数，它的返回值就是组件的初始状态，所以我们可以重新调用它：

resetData() {
  Object.assign(this.$data, this.$options.data());
}

原理

• this.$options.data() 会重新执行 data 函数，返回一个全新的初始数据对象。

• Object.assign 把新对象的属性覆盖到当前的 this.$data 上，实现重置。

示例

export default {
  data() {
    return {
      name: '',
      age: 0,
      hobbies: []
    };
  },
  methods: {
    resetForm() {
      Object.assign(this.$data, this.$options.data());
    }
  }
};

调用 this.resetForm() 就能让 data 里的值恢复成初始状态。

2. 只重置部分字段

如果只是想清空几个字段，不需要全部恢复：

resetSome() {
  this.name = '';
  this.age = 0;
}

3. 注意点

• 不要直接 this.$data = this.$options.data()，因为 Vue 的响应式对象不能直接替换。

• 如果是 Vue3 组合式 API，用 reactive 或 ref 时可以直接赋值初始对象。

• 如果 data 里有嵌套对象，方法 1 会把嵌套的也重置（除非你做深拷贝时有特殊处理）。

在 Vue2 里，可以写一个通用的 resetData 方法，让组件的 data 恢复到初始值。

methods: {
  resetData() {
    // 获取 data 函数的返回值（初始数据）
    const initialData = this.$options.data.call(this);
    // 用初始数据覆盖当前 data
    Object.keys(initialData).forEach(key => {
      this.$set(this, key, initialData[key]);
    });
  }
}