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

在 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'); // 这会触发视图更新  
    }  
  }  
};

注意事项

• 当你需要向一个对象添加多个新属性时，可以多次调用 this.$set，或者使用 Object.assign() 或其他方法创建一个新的对象，然后将其赋值给响应式对象。但请注意，使用 Object.assign() 创建的新对象并不是响应式的，除非你在 Vue 实例化之前或在组件的 data 函数中创建它。
• 当你需要在循环或计算属性中使用新添加的属性时，确保这些属性在访问前已经被正确地添加到响应式对象中，否则可能会出现错误或不一致的行为。