$set的应用场景

$set是Vue.js提供的一个实例方法，用于在响应式对象上设置响应式属性。它的主要应用场景是在以下情况下使用：

1. 添加响应式属性： 当需要向已有的响应式对象中添加新的属性，并使其成为响应式的时候，可以使用$set方法。这样添加的属性会被Vue.js自动监听并进行响应式更新。

   示例代码：

   this.$set(this.obj, 'newProperty', 'value');
   

2. 数组索引变更： 当使用索引操作（如arr[index] = value）更新Vue实例中的数组时，由于Vue.js无法检测到索引的变化，导致视图不会进行响应式更新。此时，可以使用$set方法来确保更新后的索引位置是响应式的。

   示例代码：

   this.$set(this.arr, 1, 'new value');
   

需要注意的是，$set方法只能用于已经被Vue实例代理的响应式对象上。如果在创建Vue实例之前就已经存在的对象，需要使用Vue.set全局方法来实现相同的效果。

以下是一个示例，演示了$set方法的应用场景：

<template>
  <div>
    <p>{{ obj.newProperty }}</p>
    <button @click="updateProperty">Update Property</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        existingProperty: 'existing value'
      }
    };
  },
  methods: {
    updateProperty() {
      this.$set(this.obj, 'newProperty', 'updated value');
    }
  }
};
</script>

在上述示例中，初始状态下，obj对象中只有一个名为existingProperty的属性。当点击"Update Property"按钮时，通过$set方法向obj对象中添加了一个新的属性newProperty，并将其设置为响应式的。这样，视图中的绑定会更新并显示新的属性值。

这是$set方法的一个常见应用场景，用于在已有的响应式对象中添加属性或更新数组索引，以确保属性的响应式更新。