谈到Vue.set就要说响应式原理，所以得为你自己准备下这方面的理论知识。然而，一如即往，这并不难或者枯燥。准备点鳄梨和薯条，制作些鳄梨酱，然后我们再进入话题。
数据和响应式原理
在一个Vue组件中，无论你何时创建一个data()功能属性，都会返回一个对象。Vue在组件背后做了很多事情，来使得它具有响应式。
export default { data() { return { red: 'hot', chili: 'peppers' } } }
Vue要做的第一件事是使用我们超帅的RHCP(Red Hot Chili Peppers, 一个超赞的乐队)data，它遍历了return {}对象的属性properties，然后为它们创建了唯一的getter和setter。具体情况已经超出了本文的范围，但是Vue Mastery有个很赞的视频去解析这点。
创建这些属性的目的是使你在代码中访问这些属性时（例如通过执行this.red或使用this.red=hotter进行设置时），实际上是在调用Vue为你创建的getter和setter。
在SETGET这块神奇的土地上，Vue连接起了computer properties, watchers, props,data等，从而变得响应式。以非常简单的方式，它被称为一个函数，该函数在每次setter改变时更新整个工作。
陷阱
酷极了！这就是我们喜欢Vue的原因，它具有响应式和强大的幕后功能。但是也有一些阴暗面需要我们探讨。
在我们开始之前，我们更改下data数据看发生什么。
data() { return { members: {} } }
好吧，到目前为止没什么看头，我们在data中有一个member属性，用来添加乐队成员的信息。现在，为了举例，我们添加一个方法，并假装从远程http请求中拉取一些信息，它将返回一个乐队信息的JSON对象。
data() { return { members: {} } }, methods: { getMembers() { const newMember = { name: 'Flea', instrument: 'Bass', baeLevel: 'A++' }; // Some magical method that gives us data got us this sweet info // ... } }
嗯。好吧，我们先停停然后思考下这个例子。如何将newMember对象添加到当前的member属性中？这有许多方法可以解决当前的难题。
也许你会想，我们可以将member转换成一个数组，然后将它push进去。这可行，但是这是在作弊，因为它破坏了我开始输入时细心构造的例子。
在这种情况下，我们member是一个object。好吧，简单，你会说，我们在member上添加一新的属性，这样它还是一个object。实际上，我们在member上添加个name属性。
getMembers() { const newMember = { 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);。