面试题：如何重置 Vue 的 data？

在 Vue 中，“重置 data”通常指的是将组件实例的数据恢复到其初始状态（即组件创建时 data 函数返回的对象）。有几种常用的方法来实现这一目标。

方法一：调用 `data()` 函数并合并（推荐）

这是最直接和灵活的方法。通过再次调用组件的 data 选项函数，获取初始数据对象，然后使用 Object.assign 或解构赋值将其合并回当前的 this 实例。

export default {
  data() {
    return {
      name: '',
      email: '',
      age: 0,
      hobbies: []
    }
  },
  methods: {
    resetData() {
      // 获取初始数据对象
      const initialData = this.$options.data.call(this);
      // 将当前实例的数据替换为初始数据
      Object.assign(this.$data, initialData);
    },

    // 或者使用 ES6 解构（Vue 2.7+ / Vue 3）
    // resetData() {
    //   Object.assign(this, this.$options.data());
    // }
  }
}

优点：通用性强，适用于任何数据结构。
注意：this.$options.data 是原始的 data 函数，需要使用 .call(this) 来确保其内部的 this 指向正确。

方法二：使用 `Object.assign` 重置部分数据

如果你只想重置 data 中的某些特定字段，可以显式地指定它们。

methods: {
  resetForm() {
    Object.assign(this, {
      name: '',
      email: '',
      age: 0
    });
  }
}

优点：精确控制，性能开销小。
缺点：需要手动维护字段列表，如果 data 变化，代码也需要同步更新。

方法三：重新创建组件实例（强制刷新）

通过给组件添加一个唯一的 key，当 key 变化时，Vue 会销毁旧的组件实例并创建一个新的。

<template>
  <div>
    <!-- 使用 :key 绑定一个变量 -->
    <my-component :key="componentKey" />
    <button @click="resetComponent">重置组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0
    }
  },
  methods: {
    resetComponent() {
      // 改变 key 的值，强制组件重新渲染
      this.componentKey += 1;
    }
  }
}
</script>

优点：彻底重置，包括所有状态、子组件和 DOM。
缺点：开销大，会导致组件完全销毁和重建，可能影响性能，且会丢失任何临时的非响应式状态。

方法四：使用 `$forceUpdate()`（不推荐用于重置 data）

$forceUpdate() 会强制组件重新渲染，但它不会重置 data。它只是让视图重新根据当前的 data 进行渲染。因此，它不能用来重置数据。

方法五：在 `watch` 中重置（特定场景）

有时你希望当某个 prop 变化时重置 data。

export default {
  props: ['userId'],
  data() {
    return { /* ... */ }
  },
  watch: {
    userId(newVal, oldVal) {
      // 当 userId 变化时，重置表单数据
      this.resetData(); 
    }
  },
  methods: {
    resetData() {
      Object.assign(this.$data, this.$options.data.call(this));
    }
  }
}

总结与建议

方法	适用场景	推荐度
调用 `data()` + `Object.assign`	通用，需要完全重置数据时	✅ 强烈推荐
`Object.assign` 部分重置	只需重置少数几个字段	✅ 推荐
改变 `key`	需要完全销毁并重建组件（如表单提交后清空）	⚠️ 视情况而定（开销大）
`$forceUpdate()`	强制重新渲染（不能重置 data）	❌ 不适用

核心结论：最常用且推荐的方式是 方法一：通过 this.$options.data.call(this) 获取初始数据，然后使用 Object.assign(this.$data, initialData) 将当前数据重置为初始状态。这种方法既高效又可靠。

THE END

Vue 基础面试题

方法一：调用 data() 函数并合并（推荐）

方法二：使用 Object.assign 重置部分数据