什么是$set()

$set()是Vue提供的一个全局方法，用于给对象动态添加属性，以便触发视图更新。它的语法如下：

Vue.set(target, key, value)

其中，target是需要添加属性的对象，key是要添加的属性名，value是要添加的属性值。

除了全局方法$set()，Vue还提供了相应的实例方法this.$set()，与全局方法的功能相同。

为何需要$set()

我们知道，在Vue中，数据驱动页面视图的原理是通过双向绑定来实现的。当数据改变时，相关联的视图就会自动更新。但是，如果我们想要动态地添加或删除属性，Vue默认是无法检测到这些变化的，因此就无法自动更新视图。

举个例子，假如我们有一个组件Person，其props中只有一个name属性，如下所示：

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  props: {
    name: String
  }
}
</script>

如果我们在组件中通过this.$set()方法添加一个新的属性age，那么这个组件中就会有两个属性了，分别是name和age。但是由于Vue无法检测到age属性的变化，因此视图不会自动更新。

<script>
export default {
  props: {
    name: String
  },
  created() {
    this.$set(this, 'age', 18)
  }
}
</script>

如果我们不使用$set()方法，而是直接在组件中定义age属性，然后再赋值。这时页面中只会显示name属性的值，age属性的值无法显示出来。

<template>
  <div>{{ name }} {{ age }}</div>
</template>

<script>
export default {
  props: {
    name: String
  },
  data() {
    return {
      age: 18
    }
  }
}
</script>

$set()的使用场景

$set()主要用于以下两种情况：

1. 动态添加对象属性

<script>
export default {
  data() {
    return {
      person: {
        name: 'Jack'
      }
    }
  },
  created() {
    // 动态添加属性
    Vue.set(this.person, 'age', 18)
  }
}
</script>

2. 数组变异

当我们修改数组的某一项时，Vue也无法检测到这个变化。这时候我们可以使用$set()方法进行改变。

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  },
  created() {
    // 修改数组的某一项
    Vue.set(this.list, 1, 'pear')
  }
}
</script>

需要注意的是，如果我们使用$set()方法给一个已经存在的属性赋值，那么Vue会自动检测到这个变化，因此不需要使用$set()方法。

<script>
export default {
  data() {
    return {
      person: {
        name: 'Jack',
        age: 18
      }
    }
  },
  created() {
    // 直接修改属性值
    this.person.age = 19
  }
}
</script>

set()与set()与watch()的区别

$set()与$watch()都是Vue提供的API，但是它们有着不同的作用。

$set()主要用于解决对象或数组中动态添加属性时，视图无法自动更新的问题。而$watch()则用于监听数据的变化，当特定数据发生变化时，可以执行相应的回调函数。

举个例子，假设我们有一个组件Counter，其中有一个计数器count，初始值为0。我们想要在count变化时，在控制台输出变化后的值。这时候就可以使用$watch()方法来监听count的变化。

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  created() {
    this.$watch('count', (newValue, oldValue) => {
      console.log(`count变化了：从${oldValue}变成了${newValue}`)
    })
    setInterval(() => {
      this.count++
    }, 1000)
  }
}
</script>

上述代码中，我们使用$watch()方法监听count的变化，当count变化时，会触发回调函数，并在控制台输出变化后的值。

综上所述，$set()与$watch()虽然都是Vue提供的API，但是它们的作用是不同的，需要根据实际需求进行选择和使用