Vue使用$set和$delete操作对象属性

在Vue中，使用$set和$delete方法可以操作对象属性。有时候，我们需要动态地添加一个属性到一个已经存在的对象上或删除对象中的某一个属性。默认情况下，Vue无法检测到对象属性的变化，因为Vue只能检测到对象已经存在的属性的变化。但如果使用$set和$delete方法来改变对象属性，Vue就可以监听到属性的变化并动态更新视图。

1. $set操作对象属性

$set方法的语法为this.$set(object, propertyName, value)，其中object是要添加属性的对象，propertyName是属性的名称，value是属性的值。

下面是一个示例：

<template>
  <div>
    <p>学生姓名: {{ student.name }}</p>
    <p>学生年龄: {{ student.age }}</p>
    <button @click="changeName">修改学生姓名</button>
    <button @click="addProperty">添加学生性别</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: 'Tom',
        age: 18
      }
    }
  },
  methods: {
    changeName() {
      this.student.name = 'Jerry'; // 直接修改属性无法触发更新数据
    },
    addProperty() {
      this.$set(this.student, 'gender', '男'); // 使用$set增加属性，触发更新数据
    }
  }
}
</script>

在上面的代码中，我们通过$set方法动态地添加了gender属性到student对象中，在添加属性后，视图中的数据立即更新。

2. $delete删除对象属性

$delete方法的语法为this.$delete(object, propertyName)，其中object是要删除属性的对象，propertyName是要删除的属性名称。

下面是一个示例：

<template>
  <div>
    <p>学生姓名: {{ student.name }}</p>
    <p>学生年龄: {{ student.age }}</p>
    <button @click="changeName">修改学生姓名</button>
    <button @click="deleteProperty">删除学生年龄</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: 'Tom',
        age: 18
      }
    }
  },
  methods: {
    changeName() {
      this.student.name = 'Jerry'; // 直接修改属性无法触发更新数据
    },
    deleteProperty() {
      this.$delete(this.student, 'age'); // 使用$delete删除属性，触发更新数据
    }
  }
}
</script>

在上面的代码中，我们通过$delete方法删除了age属性，删除属性后，视图中的数据立即更新。

通过以上两个示例，我们可以看出，Vue使用$set和$delete方法可以让我们动态地增加和删除对象的属性，并且可以触发数据的更新，让视图实时更新。