如何解決Vue中數(shù)組和對象更改后視圖不刷新的問題-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“如何解決Vue中數(shù)組和對象更改后視圖不刷新的問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決Vue中數(shù)組和對象更改后視圖不刷新的問題”這篇文章吧。

成都創(chuàng)新互聯(lián)為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計(jì)服務(wù)，主要包括做網(wǎng)站、成都網(wǎng)站建設(shè)、成都App制作、微信小程序、宣傳片制作、LOGO設(shè)計(jì)等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn)，可以確保每一個作品的質(zhì)量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。 

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

官方的解釋很清晰：

當(dāng)你把一個普通的 JavaScript 對象傳給 Vue 實(shí)例的 data 選項(xiàng)，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉(zhuǎn)為 getter/setter。Object.defineProperty 是 ES5 中一個無法 shim 的特性，這也就是為什么 Vue 不支持 IE8 以及更低版本瀏覽器的原因。 用戶看不到 getter/setter，但是在內(nèi)部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這里需要注意的問題是瀏覽器控制臺在打印數(shù)據(jù)對象時 getter/setter 的格式化并不同，所以你可能需要安裝 vue-devtools 來獲取更加友好的檢查接口。 每個組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時，會通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

關(guān)于getter和setter的局限性

官方文檔解釋那么多，說到底就是數(shù)據(jù)的改變必須能夠觸發(fā)set方法，否則無法響應(yīng)數(shù)據(jù)變化。那么，我們就看看set方法在什么時候會被觸發(fā)，什么時候又不會被觸發(fā)。

var person = {
 defaultname: 'tom',
 get name() {
  return this.defaultname
 },
 set name(val) {
  this.defaultname = val
  console.log("觸發(fā)了set")
 }
}

這里我們定義一個叫做person的對象，我們通過get/set來控制name，可以看到如果set被觸發(fā)，就會打印出觸發(fā)了set。

person.name
=>"tom"
person.name = 123
=>觸發(fā)了set
person.name
=>123

可以看到我們直接修改name是可以觸發(fā)set的。

person.name = {name: 'tom'}
=>觸發(fā)了set
person.name
=>{name: "tom"}
person.name.name = 123123
=>沒有打印出任何信息，說明修改name的屬性值并沒有觸發(fā)set方法。
person.name.sex = 333
=>沒有打印出任何信息，說明添加name的屬性值并沒有觸發(fā)set方法。
delete person.name.name
=>沒有打印出任何信息，說明刪除name的屬性值并沒有觸發(fā)set方法。
Object.defineProperty(person.name, 'name', {value: 4444})
=>沒有打印出任何信息，說明Object.defineProperty也沒有觸發(fā)set方法。

當(dāng)name是一個對象的時候，我們修改、添加、刪除name的屬性值都沒有觸發(fā)set方法。

person.name = [1,2,3]
=>觸發(fā)了set
person.name.push(4)
=>沒有打印出任何信息，說明push方法并沒有觸發(fā)set方法。

說明數(shù)組的push方法也無法觸發(fā)set方法，同理pop、shift、unshift等原生數(shù)組方法也是無法觸發(fā)set。

解決方案

受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)，Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實(shí)例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。例如：

var vm = new Vue({
 data:{
 a:1
 }
})

// `vm.a` 是響應(yīng)的

vm.b = 2
// `vm.b` 是非響應(yīng)的

Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動態(tài)添加新的根級響應(yīng)式屬性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上：

Vue.set(vm.someObject, 'b', 2)

您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：

this.$set(this.someObject,'b',2)

有時你想向已有對象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對象上的新屬性不會觸發(fā)更新。在這種情況下可以創(chuàng)建一個新的對象，讓它包含原對象的屬性和新的屬性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

關(guān)于Object.assign()的介紹

數(shù)組更新檢測

變異方法

還記得前面我們測試過push等方法是不能觸發(fā)set方法的，所以Vue為我們定義了一系列的變異方法，可以直接使用：

• - push()

• - pop()

• - shift()

• - unshift()

• - splice()

• - sort()

• - reverse()

替換方法

變異方法 (mutation method)，顧名思義，會改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組：

example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/)
})

你可能認(rèn)為這將導(dǎo)致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個列表。幸運(yùn)的是，事實(shí)并非如此。Vue 為了使得 DOM 元素得到大范圍的重用而實(shí)現(xiàn)了一些智能的、啟發(fā)式的方法，所以用一個含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。

注意事項(xiàng)

由于 JavaScript 的限制，Vue 不能檢測以下變動的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個項(xiàng)時，例如：vm.items[indexOfItem] = newValue

當(dāng)你修改數(shù)組的長度時，例如：vm.items.length = newLength

為了解決第一類問題，以下兩種方式都可以實(shí)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時也將觸發(fā)狀態(tài)更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

為了解決第二類問題，你可以使用 splice：

example1.items.splice(newLength)

以上是“如何解決Vue中數(shù)組和對象更改后視圖不刷新的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：如何解決Vue中數(shù)組和對象更改后視圖不刷新的問題-創(chuàng)新互聯(lián)
路徑分享：http://muchs.cn/article10/djgdgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、網(wǎng)站改版、定制開發(fā)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)