Vue 的 $set 是什么？都有什么用？

Vue 的 $set 是一个实例方法，用于在响应式对象中添加一个新属性并确保这个新属性也是响应式的。

Vue 中的响应式系统是基于 JavaScript 的 getter 和 setter 实现的，当一个对象被添加到 Vue 的响应式系统中时，Vue 会将对象的所有属性转变为 getter 和 setter，当属性被修改时，会触发视图的重新渲染。

然而，如果一个对象在 Vue 的响应式系统中被添加后，再直接给这个对象添加新的属性，这个新属性并不会自动转变为 getter 和 setter，因此也不会触发视图的重新渲染。这时就需要使用 $set 方法来手动将新属性转变为响应式属性。

例如：

<template>
  <div>
    <div>{{ obj.name }}</div>
    <button @click="addProp">Add Prop</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { name: 'Vue' }
    }
  },
  methods: {
    addProp() {
      this.obj.age = 3 // 不会触发视图的重新渲染
      this.$set(this.obj, 'age', 3) // 会触发视图的重新渲染
    }
  }
}
</script>

$set 方法的使用方式和参数和 JavaScript 的原生方法 Object.defineProperty() 类似，第一个参数是被添加属性的对象，第二个参数是属性名，第三个参数是属性值。