$set的使用场景

1. 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
   1. 当利用索引直接设置一个项时，例如：this.items[index] = value;
   2. 当修改数组的长度时，例如：vm.items.length = newLength。
2. 由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除。

举例来看，就是：

// 数组
export default {
  data () {
    return {
      items: ['a', 'b', 'c']
    }
  },
  methods: {
    handler () {
      this.items[1] = 'x';  // 不是响应性的
    }
  }
}

使用 $set：

// 数组
export default {
  data () {
    return {
      items: ['a', 'b', 'c']
    }
  },
  methods: {
    handler () {
      this.$set(this.items, 1, 'x');  // 是响应性的
    }
  }
}

以对象为例：

// 对象
export default {
  data () {
    return {
      item: {
        a: 1
      }
    }
  },
  methods: {
    handler () {
      this.item.b = 2;  // 不是响应性的
    }
  }
}

使用 $set：

// 对象
export default {
  data () {
    return {
      item: {
        a: 1
      }
    }
  },
  methods: {
    handler () {
      this.$set(this.item, 'b', 2);  // 是响应性的
    }
  }
}

另外，数组的以下方法，都是可以触发视图更新的，也就是响应性的：

push()、pop()、shift()、unshift()、splice()、sort()、reverse()。
还有一种小技巧，就是先 copy 一个数组，然后通过 index 修改后，再把原数组整个替换，比如：

handler () {
  const data = [...this.items];
  data[1] = 'x';
  this.items = data;
}