談到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);。
對於這段代碼，我有兩點想提下。目前為止，我告訴了你Vue.set是怎樣工作的，但是現在我使用this.$set，但是不要擔心，這只是個別名，所以它會以完全相同的方式運行。比較酷的是你不用在你的組件中引入Vue。
我想說的第二點是這個函數的語法。它需要傳入三個參數，第一個參數是我們要改變的object或array（案例上是this.members）。
第二個參數是指向我們傳入第一個參數object/array的property或key（這裡是newMember.name，因為我們想動態生成）。
最後是第三個參數，它是我們想要設置的值（在案例中，newMember）。
this.members [newMember.name] = newMember; // V V V this.$set(this.members, newMember.name, newMember); 複製代碼
(PS. My ASCII skills are not for sale )
但是數組的響應如何？
當我們在最初的狀態中創建一個array，Vue將它設置為響應式，然而，當你直接通過索引賦值，當前Vue不能檢測到。例如，我們如下操作：
this.membersArray[3] = myNewValue; 複製代碼
然而，Vue不能檢測到這種更改，因此它不是響應式的。請銘記於心，如果你通過pop,splice,push操作來更改數組，那麼這些操作將觸發數組的響應式，所以你可以安全地使用它們。
在必要的時候我們需要直接通過索引賦值，我們可以使用Vue.set。我們看下它和之前的例子有什麼區別。
this.$set(this.membersArray, 3, myNewValue) 複製代碼
如果你想了解更多響應式原理的注意點，請移步[link to the official documentation](vuejs.org/v2/guide/li…)。
Vue 3.0
在編寫這篇文章時，這一切仍然可能更改，但是現在滿大街都在說這些警告將不再是問題。換言之，Vue 3.0會讓你完全忘記這些邊緣的案例，除了那些可憐的人兒，他們必須要針對某些不能完全支持新響應式系統的舊瀏覽器。
