Vue如何清空对象

Vue清空对象的方法有很多，下面将介绍其中两个常用的方法。

方法一：使用Vue.set方法

Vue.set方法可以在Vue实例中添加或修改对象的某个属性，也可以将某个属性从对象中删除。当将该属性的值设为null时，对象就被清空。

示例代码如下：

<template>
  <div>
    <div>原对象：{{ obj }}</div>
    <div>
      <button @click="clearObj">清空对象</button>
    </div>
    <div>清空后的对象：{{ obj }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'John',
        age: 18,
        address: '北京市朝阳区',
      },
    };
  },
  methods: {
    clearObj() {
      Object.keys(this.obj).forEach((key) => {
        Vue.set(this.obj, key, null);
      });
    },
  },
};
</script>

方法一中的示例代码中，我们在Vue实例中定义了一个对象obj，对象中包含3个属性：name、age、address。点击“清空对象”按钮后，使用Vue.set方法将obj对象每个属性的值置为null，最终达到清空对象的目的。

方法二：使用Object.assign方法

方法二中的实现原理是利用Object.assign方法将一个空对象与原对象合并，实现清空对象的目的。

示例代码如下：

<template>
  <div>
    <div>原对象：{{ obj }}</div>
    <div>
      <button @click="clearObj">清空对象</button>
    </div>
    <div>清空后的对象：{{ obj }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: 'John',
        age: 18,
        address: '北京市朝阳区',
      },
    };
  },
  methods: {
    clearObj() {
      this.obj = Object.assign(this.obj, {});
    },
  },
};
</script>

方法二中的示例代码中，我们在Vue实例中定义了一个对象obj，对象中包含3个属性：name、age、address。点击“清空对象”按钮后，将一个空对象{}与原对象obj合并，即可实现清空对象的效果。

无论使用哪种方法，代码都非常简洁，操作方便。这里介绍的两种方法对于Vue对象的操作非常实用，对于日常开发中面对的各种场景都有所帮助。