name: 'Flea',
instrument: 'Bass',
baeLevel: 'A++' // Totally important property that we will never use
}; // Some magical method that gives us data got us this sweet info
this.members[newMember.name] = newMember;
}
Lok’tar Ogar!（不胜则亡）
可是，不，因为-
A. 这不是Orgrimmar（魔兽世界人物）
B. 现在我们遇到问题了
如果你在浏览器上测试这段代码，你将看到你确实将新数据推入member数据中了，但是此次的更改组件的状态将不会使得你的应用重新渲染。
仅将这些数据用于某些计算或某种内部存储的情况下，以这种方式进行操作不会影响你的应用程序。然而，这里应该是大大的转折HOWERVER，如果你在自己app上正在使用这种数据去展示数据，或者根据条件v-if或v-else来渲染，事情将变得有趣。
实际使用Vue.set
所以，现在我们明白问题实际出在哪里了，我们可以学习什么是正确的解决方案。允许我向你介绍Vue.set。
Vue.set是一个工具，它允许我们向已经激活的对象添加新属性，然后确保这个新的属性也是响应的。
这完全解决了我们在另一个例子中遇到的问题，因为当我们设置member的新属性时，它将自动挂接到Vue的响应式系统中，酷酷的getters/setters和Vue的魔法都在框架背后运行。
但是，需要一点说明来了解它如何影响数组。到目前为止，我们只是试验过了objects，这很容易理解。新的属性？如果你希望它是响应式，则通过Vue.set添加。简单～
延续上面的示例，我们切换为使用Vue.set的方式。
getMembers() {
const newMember = {
name: 'Flea',
instrument: 'Bass',
baeLevel: 'A++'
}; // Some magical method that gives us data got us this sweet info //this.members[newMember.name] = newMember;
this.$set(this.members, newMember.name, newMember);
}
这是新添加的this.$set(this.members, newMember.name, newMember);。
对于这段代码，我有两点想提下。目前为止，我告诉了你Vue.set是怎样工作的，但是现在我使用this.$set，但是不要担心，这只是个别名，所以它会以完全相同的方式运行。比较酷的是你不用在你的组件中引入Vue。
我想说的第二点是这个函数的语法。它需要传入三个参数，第一个参数是我们要改变的object或array（案例上是this.members）。
第二个参数是指向我们传入第一个参数object/array的property或key（这里是newMember.name，因为我们想动态生成）。
最后是第三个参数，它是我们想要设置的值（在案例中，newMember）。
this.members [newMember.name] = newMember;
// V V V
