Vue.set()和this.$set()使用和区别
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性
data () { return { student: { name: '', sex: '' } } } mounted () { // ——钩子函数，实例挂载之后 this.
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 开发过程中，有时我们需要修改数据并期望视图能够随之更新。然而，Vue 的响应式系统并非对所有数据修改都能自动响应。这涉及到Vue.set()和this.$set()这两个方法，它们在处理非原始数据类型（如对象）的动态属性时起着关键作用。
Vue.set()和this.$set()的主要用途是在Vue实例创建后，添加或修改数据对象的属性，并确保这些变更能够被Vue的响应式系统检测到，从而更新对应的视图。这两种方法的使用场景和区别如下：
1. **Vue.set()**：
- 可以用来修改Vue实例根级别的数据，也可以用于嵌套对象的属性。例如：
```javascript
const app = new Vue({
data: {
a: 1,
info: {
name: '小明'
}
}
});
Vue.set(app.data, 'b', 2); // 添加根属性
Vue.set(app.info, 'sex', '男'); // 添加嵌套属性
```
- Vue.set()是Vue构造函数的一个静态方法，可以直接通过Vue实例或Vue构造器调用。
2. **this.$set()**：
- 这个方法是Vue实例的一个成员，通常在Vue组件内部使用。它的功能和Vue.set()相同，但直接与当前Vue实例关联。
```javascript
new Vue({
data: {
student: {
name: '',
sex: ''
}
},
mounted() {
this.$set(this.student, 'age', 24); // 组件内添加属性
}
});
```
- this.$set()在组件内部方便地访问，无需通过Vue构造器。
**实现原理**：
Vue.set()和this.$set()都调用了同一核心方法——`set`，该方法位于`../observer/index`模块中。它们之间的差异仅在于调用方式，Vue.set()直接引用set，而this.$set()是通过原型链将set绑定到Vue实例上。
**注意事项**：
- **响应式属性的添加**：在Vue实例创建后，如果尝试直接给实例添加新的属性，例如`this.student.age = 242`，Vue的响应式系统无法检测到这个变更，因此视图不会更新。正确的做法是使用Vue.set()或this.$set()。
- **根级响应式属性**：Vue不支持动态添加根级响应式属性。如果试图在实例创建后添加新的根属性，如`Vue.set(app, 'newProp', value)`，Vue将不会响应这个改变。
- **数组和对象的处理**：对于数组，Vue可以通过索引直接修改元素，比如`array[index] = newValue`，这将会触发响应式更新。但是，如果添加新的数组元素，如`array.push(newItem)`，Vue能检测到数组长度的变化，但不能监听新添加的元素。因此，对于数组的动态添加，依然推荐使用Vue.set()或this.$set()。
总结来说，Vue.set()和this.$set()是用来解决Vue中对象属性动态添加时的响应性问题。在开发中，当需要确保数据变化能够反映到视图上时，应优先考虑使用这两个方法。了解它们的工作原理和正确使用方法，能够避免出现预期外的视图更新问题，提高Vue应用的健壮性和用户体验。
