vue 中数组添加属性

在 Vue 中，我们可以通过给数组的元素添加属性来实现数组的扩展。如果是通过 `Vue.set` 或 `this.$set` 来添加属性，Vue 会自动进行响应式处理，如果是通过索引直接赋值的方式添加属性，则需要手动调用 `Vue.set` 或 `this.$set` 方法来触发响应式更新。

下面是两种添加属性的方法：

### 1. 使用 Vue.set 或 this.$set

// 在methods中
addProp() {
  this.$set(this.users[0], 'age', 20);
},
// 或者
addProp() {
  Vue.set(this.users[0], 'age', 20);
}

上述示例中，我们通过 `Vue.set` 或 `this.$set` 方法来给 users 数组中的第一个元素添加一个 age 属性，并将其值设置为 20。这样添加的属性将会被 Vue 进行响应式处理。

### 2. 直接赋值

// 在methods中
addProp() {
  this.users[0].age = 20;
  this.$forceUpdate(); // 手动触发更新
},

上述示例中，我们通过直接给 users 数组中的第一个元素添加一个 age 属性，并将其值设置为 20。由于这种方式不会自动触发响应式更新，因此我们需要手动调用 `$forceUpdate` 方法来强制更新视图。