vue this.$set()、this.$delete使用方法

this.$set 是 Vue 实例方法，用于动态设置对象的属性，这会触发视图更新。

用法：

this.$set(target, propertyName/index, value)

• target: 要更改的数据对象。
• propertyName/index: 要设置的属性名或数组索引。
• value: 新属性值或要添加的元素。

示例代码：

// 假设有一个 Vue 实例，其 data 有一个对象 users
data() {
  return {
    users: {
      '1': { name: 'Alice' },
      '2': { name: 'Bob' }
    }
  };
},
 
// 使用 this.$set 添加新用户
methods: {
  addUser(id, name) {
    this.$set(this.users, id, { name: name });
  }
}
 
// 调用 addUser 方法添加一个新用户
this.addUser('3', 'Charlie');

this.$delete 是 Vue 实例方法，用于删除对象的属性，这也会触发视图更新。

用法：

this.$delete(target, propertyName/index)

• target: 要更改的数据对象。
• propertyName/index: 要删除的属性名或数组索引。

示例代码：

// 假设有一个 Vue 实例，其 data 有一个对象 users
data() {
  return {
    users: {
      '1': { name: 'Alice' },
      '2': { name: 'Bob' }
    }
  };
},
 
// 使用 this.$delete 删除用户
methods: {
  removeUser(id) {
    this.$delete(this.users, id);
  }
}
 
// 调用 removeUser 方法删除一个用户
this.removeUser('2');