目录
- 🤔问题
- 📝回答
- 🎨使用场景
- 动态添加属性
- 动态添加数组元素
- ❌注意事项
- $set只能在响应式对象上使用
- $set不能用于根级别的属性
- $set的性能问题
- 📄总结
🤔问题
Vue是一款在国内非常流行的框架，采用MVVM架构，它提供了一种响应式的数据双向绑定机制，使得开发者可以更方便地管理模型和视图。但是在Vue2中，由于使用了Object.defineProperty来追踪属性变化，但是它只能追踪已经存在的属性，无法追踪动态添加的属性，导致我们动态添加了属性后视图也无法更新。这个时候就需要$set的帮助了。
注：Vue3使用的是Proxy去监听属性变化，所以不会有这个问题。但是为了保持向后兼容性，Vue3仍然保留了这个方法，可以使用，但已经不是必需的！
📝回答
$set是Vue提供的一个全局方法，它的作用是在响应式对象上添加一个属性，并确保这个属性是响应式的。这意味着，当这个属性的值发生变化时，Vue会自动更新视图。
$set方法的语法如下：
/**object*/
//this
this.$set(object, propertyName, value)
//vue
Vue.set(object, propertyName, value)
/**Array*/
//this
this.$set(array, index, value)
//vue
Vue.set(array, index, value)
其中，object是要添加属性的对象，propertyName是要添加的属性名，value是要添加的属性值。
举个🌰栗子，假设我们有一个data对象：
data: {
user: {
name: '张三',
age: 18
}
}
如果我们想要添加一个新的属性gender，我们可以使用$set方法：
Vue.set(this.user, 'gender', '男')
这样，我们就成功地向user对象中添加了一个gender属性，Vue也会自动更新视图。
🎨使用场景
需要注意的是，$set方法不仅可以用于添加或修改对象属性，而且可以用于数组，并且数组可以使用Vue提供的变异方法，如push、pop、splice等。
动态添加属性
在Vue中，如果我们想要动态地添加一个属性，我们通常会使用以下方式：
this.obj.newProp = 'new value';
但是，这种方式会导致新添加的属性不是响应式的，也就是说，当这个属性的值发生变化时，视图不会自动更新。这时，我们就需要使用$set方法来确保新添加的属性是响应式的：
this.$set(this.obj, 'newProp', 'new value');
这样，当newProp的值发生变化时，视图会自动更新。
动态添加数组元素
在Vue中，如果我们想要动态地添加一个数组元素，我们通常会使用以下方式：
this.arr.push('new item');
我们也可以使用$set方法来确保新添加的元素是响应式的：
this.$set(this.arr, this.arr.length, 'new item');
这样，当新元素被添加到数组中时，视图会自动更新。
❌注意事项
虽然$set方法可以解决动态添加属性和数组元素的问题，但是我们需要注意以下几点：
$set只能在响应式对象上使用
$set方法只能在响应式对象上使用，如果我们在非响应式对象上使用$set方法，它将不起作用。
$set不能用于根级别的属性
$set方法不能用于根级别的属性，也就是说，我们不能使用$set方法来添加或修改组件的根级别属性。如果我们需要修改根级别属性，我们应该在组件的data选项中声明这些属性。
$set的性能问题
$set方法会对性能产生一定的影响，因为它需要遍历整个对象来确保新添加的属性是响应式的。因此，我们应该尽量避免频繁地使用$set方法。
📄总结
$set方法是Vue提供的一个全局方法，它的作用是在响应式对象上添加一个属性，并确保这个属性是响应式的。$set方法的使用场景包括动态添加属性和数组元素。但是，我们需要注意$set方法只能在响应式对象上使用，不能用于根级别的属性，并且会对性能产生一定的影响。
