this.$set怎么在vue中使用

在 Vue 中，$set 是一个实例方法，主要用来向响应式对象添加一个新属性，并确保这个新属性被观察。$set 方法接收三个参数：

- 对象(Object)：要添加属性的对象

- 键(Key)：要添加的属性名称

- 值(Value)：要添加的属性值

$set 方法只对响应式对象起作用，如果给普通的对象添加属性，这个新属性并不是响应式的。使用 $set 方法后，添加的属性会通过观察者模式通知 Vue 的响应式系统。

举个例子，在 Vue 组件中，我们可以通过下面的方式使用 $set 方法来修改 data 中的属性：

<template>
  <div>
    {{ message }}
    <button @click="addItem">添加新项</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []   // 初始值是空数组
    };
  },
  methods: {
    addItem() {
      this.$set(this.items, 0, 'New Item');  // 在索引为0的位置添加新项目
      //this.items[0] = 'New Item';  // 不使用 $set 方法，新添加的项目不会被观察
    }
  },
};
</script>

在这个例子中，我们使用 $set 方法向 items 数组中添加新项目，并确保新项目被 Vue 的响应式系统观察。如果我们在 addItem 方法中不使用 $set 方法，而是直接给 items 数组添加新项目，那么这个新项目就不会被 Vue 的响应式系统观察，页面不会自动更新。

总结来说，$set 方法是 Vue 中用来添加响应式属性的方法，使用 $set 方法添加属性后，属性才能被 Vue 的响应式系统所观察，并且能够触发组件的重新渲染。因此，在使用 Vue 进行组件开发时，我们通常会在修改响应式对象时使用 $set 方法，以确保页面能够正确地响应数据的变化。