vue2 $set

// 使用 Vue 2 的 $set 方法来响应式地更新数组或对象的属性

// 示例 1: 更新对象的属性
new Vue({
  el: '#app',
  data: {
    obj: { a: 1 }
  },
  methods: {
    updateObjProperty() {
      // 直接修改 obj.b 不会触发视图更新
      // this.obj.b = 2; // ❌ 非响应式的

      // 使用 $set 方法确保视图更新
      this.$set(this.obj, 'b', 2); // ✅ 响应式的
    }
  }
});

// 示例 2: 更新数组中的元素
new Vue({
  el: '#app',
  data: {
    arr: [1, 2, 3]
  },
  methods: {
    updateArrayElement() {
      // 直接修改数组元素不会触发视图更新
      // this.arr[1] = 5; // ❌ 非响应式的

      // 使用 $set 方法确保视图更新
      this.$set(this.arr, 1, 5); // ✅ 响应式的
    }
  }
});

解释说明：

• $set 方法：在 Vue 2 中，直接修改对象的属性或数组的元素不会触发视图的更新。为了确保视图能够响应数据的变化，可以使用 this.$set 方法。
• 参数：
  • 第一个参数是要修改的对象或数组。
  • 第二个参数是要修改的属性名或索引。
  • 第三个参数是新的值。

通过这种方式，Vue 可以检测到变化并更新视图。