談到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屬性，用來添加樂隊成員的信息?，F在，為了舉例，我們添加一個方法，并假裝從遠程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