vue中向响应式对象中添加新属性的方法（vm.$set() ）

1. 什么是 vm.$set()

在 Vue.js 中，vm.$set() 是一个实例方法，专门用于向 Vue 的响应式对象中添加新属性。它确保新添加的属性能够被 Vue的响应式系统所追踪，从而实现数据变化时视图的自动更新。

2. 使用语法

vm.$set(obj, key, val);

1. vm：Vue 实例。
2. obj：目标对象，通常是 Vue 的数据对象（如 data）。
3. key：要添加的属性名（字符串）。
4. val：要设置的值。

3. 工作原理

Vue.js 的响应式系统使用 Object.defineProperty() 方法来劫持对象属性的 getter 和
setter。这意味着只有在初始化时定义的属性是响应式的。如果你直接向一个响应式对象添加新属性，Vue 无法检测到这个变化，视图不会更新。

使用 vm.$set() 可以让 Vue 知道你添加了新属性，并确保该属性是响应式的。其内部逻辑会：

1. 检查目标对象是否已经具有该属性。
2. 如果没有，使用 Object.defineProperty() 将新属性添加到对象中。
3. 确保该新属性是响应式的，以便视图能够自动更新。

4. 使用示例

new Vue({el: '#app',data: {user: {name: 'John',age: 30}},methods: {addEmail() {// 使用 $set 添加新属性this.$set(this.user, 'email', 'john@example.com');}}
});

在这个例子中，调用 addEmail 方法后，user 对象会变为：

{name: 'John',age: 30,email: 'john@example.com'
}

并且在模板中访问 user.email 时，Vue 会正确地更新视图。

5. 注意事项

• 性能：频繁使用 vm.$set() 可能会影响性能，因为每次调用都会导致 Vue
  的响应式系统重新追踪这个属性。通常，你应该在需要时再使用，而不是在每次渲染时都使用。
• 数组操作：对于数组，Vue 提供了专门的方法（如 Vue.set() 和 splice()），可以确保在更新数组时也能触发视图更新。例如：

this.$set(this.myArray, index, newValue);

• 不要直接修改对象的原型：$set() 只适用于对象本身，不适用于其原型。如果你需要添加的属性是对象的原型中的属性，Vue
  不会将其视为响应式。

6. 适用场景

• 动态添加属性：当你需要在运行时向对象添加新属性，且希望这些新属性能够响应式更新时，应使用 vm.$set()。
• 处理异步数据：在处理从 API 获取的数据时，如果响应中包含新属性，使用 $set() 可以确保这些属性是响应式的。

总结
vm.$set() 是 Vue.js 提供的一个重要方法，用于确保动态添加的属性能够参与到 Vue 的响应式系统中。通过合理使用这个方法，可以有效地管理 Vue 应用中的数据和视图之间的同步关系。如果你有任何进一步的问题或需要更多示例，请随时告诉我！