1. 会发生什么？
在 Vue 中，当你直接给 data 中的对象添加一个新属性时，这个新属性不会自动变成响应式的。这意味着 Vue 无法检测到这个新属性的变化，因此不会触发视图的更新。
2. 如何解决？
Vue 提供了一个全局 API $set，用于手动将新属性设置为响应式。使用 $set 可以确保 Vue 能够追踪到这个属性的变化，并触发视图更新。
3. 代码示例
<template>
<div>
<ul>
<li v-for="value in obj" :key="value"> {{value}} </li>
</ul>
<button @click="addObjB">添加 obj.b</button>
</div>
</template>
<script>
export default {
data () {
return {
obj: {
a: 'obj.a'
}
}
},
methods: {
addObjB () {
// 直接添加新属性，视图不会更新
// this.obj.b = 'obj.b';
// 使用 $set 添加新属性，视图会更新
this.$set(this.obj, 'b', 'obj.b');
console.log(this.obj);
}
}
}
</script>
4. 解释
- 直接添加属性：
this.obj.b = 'obj.b'，这种方式添加的属性不会被 Vue 检测到，视图不会更新。 - 使用
$set：this.$set(this.obj, 'b', 'obj.b')，这种方式会手动将b属性设置为响应式，视图会随之更新。
5. 记忆技巧
- 直接添加：视图不更新。
- 使用
$set：视图会更新。
总结
在 Vue 中，如果你需要动态添加一个响应式属性到 data 中的对象，记得使用 $set 方法，这样可以确保 Vue 能够追踪到这个属性的变化并更新视图。
回答： 在vue中给data的属性中添加一个新的属性的话，此时它这个新的属性它不是一个响应式的一个数据，然后不会被vue检测到,也更不会引起这个vue视图的更新，呃，然后vue里边儿提供了一个全局的API叫做$set。然后可以用于手动的将这个新添加的属性，然后设置为响应式的，然后这样的话就vue就能检测到追踪到这个新属性的变化，并触发视图的更新。里面一共三个参数，分别是对象，属性名，属性值。
