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

在 Vue 中，重置 data 是指将组件的状态恢复到初始值。以下是几种常见的重置 data 的方法：

1. 手动重置

通过遍历 data 的初始值，逐个重新赋值。

示例

export default {
  data() {
    return {
      message: 'Hello',
      count: 0,
      user: {
        name: 'John',
        age: 25
      }
    };
  },
  methods: {
    resetData() {
      // 手动重置 data
      this.message = 'Hello';
      this.count = 0;
      this.user = {
        name: 'John',
        age: 25
      };
    }
  }
};

优点：简单直接。
缺点：如果 data 属性较多，代码会显得冗长。

2. 使用 `Object.assign`

通过 Object.assign 将初始 data 对象合并到当前 data 中。

示例

export default {
  data() {
    return {
      message: 'Hello',
      count: 0,
      user: {
        name: 'John',
        age: 25
      }
    };
  },
  methods: {
    resetData() {
      // 使用 Object.assign 重置 data
      Object.assign(this.$data, this.$options.data.call(this));
    }
  }
};

优点：代码简洁，适合 data 属性较多的情况。
缺点：如果 data 中有嵌套对象，需要使用深拷贝。

3. 使用深拷贝

如果 data 中有嵌套对象或数组，可以使用深拷贝来重置。

示例

import _ from 'lodash'; // 使用 lodash 的深拷贝方法

export default {
  data() {
    return {
      message: 'Hello',
      count: 0,
      user: {
        name: 'John',
        age: 25
      }
    };
  },
  methods: {
    resetData() {
      // 使用深拷贝重置 data
      const initialData = this.$options.data.call(this);
      Object.assign(this.$data, _.cloneDeep(initialData));
    }
  }
};

优点：支持嵌套对象和数组的深拷贝。
缺点：需要引入第三方库（如 lodash）。

4. 使用 `this.$options.data`

Vue 实例的 $options.data 属性保存了初始的 data 函数，可以通过调用它来获取初始值。

示例

export default {
  data() {
    return {
      message: 'Hello',
      count: 0,
      user: {
        name: 'John',
        age: 25
      }
    };
  },
  methods: {
    resetData() {
      // 调用 $options.data 获取初始值
      const initialData = this.$options.data.call(this);
      Object.assign(this.$data, initialData);
    }
  }
};

优点：无需额外代码，直接使用 Vue 提供的特性。
缺点：如果 data 中有嵌套对象，需要使用深拷贝。

5. 使用 `Vue.set` 或 `this.$set`

如果需要重置响应式属性，可以使用 Vue.set 或 this.$set。

示例

export default {
  data() {
    return {
      message: 'Hello',
      count: 0,
      user: {
        name: 'John',
        age: 25
      }
    };
  },
  methods: {
    resetData() {
      // 使用 Vue.set 重置响应式属性
      this.$set(this, 'message', 'Hello');
      this.$set(this, 'count', 0);
      this.$set(this, 'user', { name: 'John', age: 25 });
    }
  }
};

优点：确保属性保持响应式。
缺点：代码较长，适合单个属性重置。

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

通过修改组件的 key 属性，强制 Vue 重新创建组件实例，从而重置 data。

示例

<template>
  <div :key="componentKey">
    <p>{{ message }}</p>
    <button @click="resetData">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello',
      componentKey: 0
    };
  },
  methods: {
    resetData() {
      // 修改 key 强制重新渲染组件
      this.componentKey += 1;
    }
  }
};
</script>

优点：简单粗暴，适合需要完全重置组件的场景。
缺点：会重新创建组件实例，性能开销较大。

7. 总结

方法	适用场景	优点	缺点
手动重置	简单场景	直接、简单	代码冗长，不适合复杂 data
`Object.assign`	普通对象重置	代码简洁	不支持嵌套对象的深拷贝
深拷贝	嵌套对象或数组重置	支持复杂数据结构	需要引入第三方库
`$options.data`	普通对象重置	无需额外代码	不支持嵌套对象的深拷贝
`Vue.set`	单个响应式属性重置	确保属性保持响应式	代码较长
修改 `key`	需要完全重置组件	简单粗暴	性能开销较大