vue中 this.$set 的作用

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

在 Vue.js 中，this.$set 是一个实例方法，用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。这个方法主要用于解决 Vue 不能检测对象属性的添加或删除的问题。

当你向一个已经创建的响应式对象添加新的属性时，Vue 默认不会触发视图的更新，因为这个属性并不是在 Vue 实例化过程中就存在的。为了解决这个问题，你可以使用 this.$set 方法。

export default {  
  data() {  
    return {  
      obj: {  
        a: 1  
      }  
    };  
  },  
  methods: {  
    addProp() {  
      // 如果没有使用 this.$set，视图不会更新  
      this.$set(this.obj, 'b', 2);  
    }  
  }  
};

export default {  
  data() {  
    return {  
      arr: ['apple', 'banana']  
    };  
  },  
  methods: {  
    changeElement() {  
      // 使用索引直接修改数组元素，视图可能不会更新  
      // this.arr[1] = 'orange'; // 这可能不会触发视图更新  
  
      // 使用 this.$set  
      this.$set(this.arr, 1, 'orange'); // 这会触发视图更新  
    }