談到Vue.set就要說(shuō)響應(yīng)式原理，所以得為你自己準(zhǔn)備下這方面的理論知識(shí)。然而，一如即往，這并不難或者枯燥。準(zhǔn)備點(diǎn)鱷梨和薯?xiàng)l，制作些鱷梨醬，然后我們?cè)龠M(jìn)入話(huà)題。

數(shù)據(jù)和響應(yīng)式原理

在一個(gè)Vue組件中，無(wú)論你何時(shí)創(chuàng)建一個(gè)data()功能屬性，都會(huì)返回一個(gè)對(duì)象。Vue在組件背后做了很多事情，來(lái)使得它具有響應(yīng)式。

export default {
 data() {
  return {
   red: 'hot',
   chili: 'peppers'
  }
 }
}

Vue要做的第一件事是使用我們超帥的RHCP(Red Hot Chili Peppers, 一個(gè)超贊的樂(lè)隊(duì))data，它遍歷了return {}對(duì)象的屬性properties，然后為它們創(chuàng)建了唯一的getter和setter。具體情況已經(jīng)超出了本文的范圍，但是Vue Mastery有個(gè)很贊的視頻去解析這點(diǎn)。

創(chuàng)建這些屬性的目的是使你在代碼中訪(fǎng)問(wèn)這些屬性時(shí)（例如通過(guò)執(zhí)行this.red或使用this.red=hotter進(jìn)行設(shè)置時(shí)），實(shí)際上是在調(diào)用Vue為你創(chuàng)建的getter和setter。

在SETGET這塊神奇的土地上，Vue連接起了computer properties, watchers, props,data等，從而變得響應(yīng)式。以非常簡(jiǎn)單的方式，它被稱(chēng)為一個(gè)函數(shù)，該函數(shù)在每次setter改變時(shí)更新整個(gè)工作。

陷阱

酷極了！這就是我們喜歡Vue的原因，它具有響應(yīng)式和強(qiáng)大的幕后功能。但是也有一些陰暗面需要我們探討。

在我們開(kāi)始之前，我們更改下data數(shù)據(jù)看發(fā)生什么。

data() {
  return {
    members: {}
  }
}

好吧，到目前為止沒(méi)什么看頭，我們?cè)赿ata中有一個(gè)member屬性，用來(lái)添加樂(lè)隊(duì)成員的信息?，F(xiàn)在，為了舉例，我們添加一個(gè)方法，并假裝從遠(yuǎn)程http請(qǐng)求中拉取一些信息，它將返回一個(gè)樂(lè)隊(duì)信息的JSON對(duì)象。

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

  // ...
 }
}

嗯。好吧，我們先停停然后思考下這個(gè)例子。如何將newMember對(duì)象添加到當(dāng)前的member屬性中？這有許多方法可以解決當(dāng)前的難題。

也許你會(huì)想，我們可以將member轉(zhuǎn)換成一個(gè)數(shù)組，然后將它push進(jìn)去。這可行，但是這是在作弊，因?yàn)樗茐牧宋议_(kāi)始輸入時(shí)細(xì)心構(gòu)造的例子。

在這種情況下，我們member是一個(gè)object。好吧，簡(jiǎn)單，你會(huì)說(shuō)，我們?cè)趍ember上添加一新的屬性，這樣它還是一個(gè)object。實(shí)際上，我們?cè)趍ember上添加個(gè)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!（不勝則亡）

可是，不，因?yàn)?

A. 這不是Orgrimmar（魔獸世界人物）
B. 現(xiàn)在我們遇到問(wèn)題了

如果你在瀏覽器上測(cè)試這段代碼，你將看到你確實(shí)將新數(shù)據(jù)推入member數(shù)據(jù)中了，但是此次的更改組件的狀態(tài)將不會(huì)使得你的應(yīng)用重新渲染。

僅將這些數(shù)據(jù)用于某些計(jì)算或某種內(nèi)部存儲(chǔ)的情況下，以這種方式進(jìn)行操作不會(huì)影響你的應(yīng)用程序。然而，這里應(yīng)該是大大的轉(zhuǎn)折HOWERVER，如果你在自己app上正在使用這種數(shù)據(jù)去展示數(shù)據(jù)，或者根據(jù)條件v-if或v-else來(lái)渲染，事情將變得有趣。

實(shí)際使用Vue.set

所以，現(xiàn)在我們明白問(wèn)題實(shí)際出在哪里了，我們可以學(xué)習(xí)什么是正確的解決方案。允許我向你介紹Vue.set。

Vue.set是一個(gè)工具，它允許我們向已經(jīng)激活的對(duì)象添加新屬性，然后確保這個(gè)新的屬性也是響應(yīng)的。

這完全解決了我們?cè)诹硪粋€(gè)例子中遇到的問(wèn)題，因?yàn)楫?dāng)我們?cè)O(shè)置member的新屬性時(shí)，它將自動(dòng)掛接到Vue的響應(yīng)式系統(tǒng)中，酷酷的getters/setters和Vue的魔法都在框架背后運(yùn)行。

但是，需要一點(diǎn)說(shuō)明來(lái)了解它如何影響數(shù)組。到目前為止，我們只是試驗(yàn)過(guò)了objects，這很容易理解。新的屬性？如果你希望它是響應(yīng)式，則通過(guò)Vue.set添加。簡(jiǎn)單～

延續(xù)上面的示例，我們切換為使用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);。

對(duì)于這段代碼，我有兩點(diǎn)想提下。目前為止，我告訴了你Vue.set是怎樣工作的，但是現(xiàn)在我使用this.$set，但是不要擔(dān)心，這只是個(gè)別名，所以它會(huì)以完全相同的方式運(yùn)行。比較酷的是你不用在你的組件中引入Vue。

我想說(shuō)的第二點(diǎn)是這個(gè)函數(shù)的語(yǔ)法。它需要傳入三個(gè)參數(shù)，第一個(gè)參數(shù)是我們要改變的object或array（案例上是this.members）。

第二個(gè)參數(shù)是指向我們傳入第一個(gè)參數(shù)object/array的property或key（這里是newMember.name，因?yàn)槲覀兿雱?dòng)態(tài)生成）。
最后是第三個(gè)參數(shù)，它是我們想要設(shè)置的值（在案例中，newMember）。

     this.members [newMember.name] = newMember;
//      V        V       V
this.$set(this.members, newMember.name,  newMember);

(PS. My ASCII skills are not for sale )

但是數(shù)組的響應(yīng)如何？

當(dāng)我們?cè)谧畛醯臓顟B(tài)中創(chuàng)建一個(gè)array，Vue將它設(shè)置為響應(yīng)式，然而，當(dāng)你直接通過(guò)索引賦值，當(dāng)前Vue不能檢測(cè)到。例如，我們?nèi)缦虏僮鳎?br />

this.membersArray[3] = myNewValue;

然而，Vue不能檢測(cè)到這種更改，因此它不是響應(yīng)式的。請(qǐng)銘記于心，如果你通過(guò)pop,splice,push操作來(lái)更改數(shù)組，那么這些操作將觸發(fā)數(shù)組的響應(yīng)式，所以你可以安全地使用它們。

在必要的時(shí)候我們需要直接通過(guò)索引賦值，我們可以使用Vue.set。我們看下它和之前的例子有什么區(qū)別。

this.$set(this.membersArray, 3, myNewValue)

如果你想了解更多響應(yīng)式原理的注意點(diǎn)，請(qǐng)移步[link to the official documentation](https://vuejs.org/v2/guide/list.html#Caveats) 。

Vue 3.0

在編寫(xiě)這篇文章時(shí)，這一切仍然可能更改，但是現(xiàn)在滿(mǎn)大街都在說(shuō)這些警告將不再是問(wèn)題。換言之，Vue 3.0會(huì)讓你完全忘記這些邊緣的案例，除了那些可憐的人兒，他們必須要針對(duì)某些不能完全支持新響應(yīng)式系統(tǒng)的舊瀏覽器。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論