vue this.$set

// 使用 this.$set 的示例代码

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    object: {
      name: 'Vue'
    },
    array: ['a', 'b']
  },
  methods: {
    updateMessage() {
      // 直接修改 message，Vue 可以检测到变化
      this.message = 'Hello World!';
    },
    addObjectProperty() {
      // 使用 this.$set 添加新属性，确保 Vue 检测到变化
      this.$set(this.object, 'age', 20);
    },
    updateArrayItem() {
      // 修改数组中的某个元素，使用 this.$set 确保 Vue 检测到变化
      this.$set(this.array, 1, 'c');
    }
  }
});

解释说明：

• this.$set 是 Vue 提供的一个方法，用于在对象或数组中添加或更新属性，并确保这些变化能够被 Vue 的响应式系统捕获。
• 如果直接修改对象的属性或数组的元素（例如 this.object.age = 20 或 this.array[1] = 'c'），Vue 可能无法检测到这些变化，导致视图不会更新。因此，使用 this.$set 可以确保 Vue 正确地追踪这些变化并更新视图。