vue $set 实现给数组集合对象赋值

当使用 Vue.js 开发中，如果想要给数组或对象添加新属性并确保这些属性是可响应的，可以使用 Vue 的 $set 方法来实现。

Vue.$set() 方法接受三个参数：对象，键，值。它所做的主要工作就是创建新属性，并将其设置为可响应的。

下面是使用Vue.$set()方法来给数组添加新元素的示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addItem()">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]
    };
  },

  methods: {
    addItem() {
      const newId = this.items.length + 1;
      const newItem = {id: newId, name: "Orange"};
      this.$set(this.items, this.items.length, newItem);
    }
  }
};
</script>

在上面的示例中，我们定义了一个数组 items，其中包含两个元素。我们定义了一个 addItem() 方法，该方法创建一个新的对象 (newItem) 并将其添加到数组末尾。为了让视图中的列表随着数组的改变而更新，我们在使用 $set() 方法来指定数组中新元素的索引。

接下来，我们来看一个使用 $set 方法给对象添加新属性的示例：

<template>
  <div>
    <p>Username: {{ user.username }}</p>
    <p>Email: {{ user.email }}</p>
    <button @click="changeUser()">Change User</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: { username: 'JohnDoe', email: '[e-mail]' }
    };
  },

  methods: {
    changeUser() {
      // Add the `age` property to the `user` object
      this.$set(this.user, 'age', 25)
    }
  }
};
</script>

在上面的示例中，我们定义了一个对象 user，它包含两个属性：username 和 email。我们定义了一个 changeUser() 方法，该方法添加一个新属性 age 到 user 对象中。我们使用 $set() 方法指定了要添加的属性 age 的键值。这样，当我们调用 changeUser() 方法时，将更新视图并显示新的属性 age。

如果我们没有使用 $set() 方法，那么添加属性 age 将不会被视图所监测，这将导致页面显示不正确和数据的不同步。

总结而言，Vue.$set() 方法是操作 Vue.js 中数组和对象的必备方法。它可以确保新添加的属性是可响应的，并且可以更新视图。 如果我们需要在 Vue.js 中动态添加或删除属性或元素，我们应该使用 $set() 方法。