這篇文章主要為大家展示了“Vue不能檢測(cè)到Object/Array更新的情況怎么辦”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue不能檢測(cè)到Object/Array更新的情況怎么辦”這篇文章吧。

創(chuàng)新互聯(lián)建站，為您提供網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開(kāi)發(fā)設(shè)計(jì)，對(duì)服務(wù)成都木包裝箱等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

數(shù)組

索引

1. 使用下標(biāo)更新數(shù)組元素；

2. 使用賦值方式改變數(shù)組長(zhǎng)度；

3. 使用下標(biāo)增刪數(shù)組元素；

正文

使用下標(biāo)更新數(shù)組元素

data: {
  arrs: [0, 1, 2, 3]
}

直接使用this.arrs[0] = 'zero';雖然數(shù)組確實(shí)是被更新了，但是更新不會(huì)被渲染到視圖（html頁(yè)面）上。因?yàn)閂ue沒(méi)有檢測(cè)到數(shù)組的更新。

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

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

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

官方應(yīng)對(duì)方法：

1、Vue.set( target, key, value )

Vue.set(this.arrs, 0, 'zero');

2.vm.items.splice(indexOfItem, 1, newValue)

 

this.arrs.splice(0, 1, 'zero');

使用賦值方式改變數(shù)組長(zhǎng)度

即this.arrs.length = 100;無(wú)效！

官方應(yīng)對(duì)方法：

1、vm.items.splice(newLength)

this.arrs.splice(100);

使用下標(biāo)增刪數(shù)組元素

即一下操作無(wú)效：

this.arrs[this.arrs.length] = this.arrs.length;

官方應(yīng)對(duì)方法：變異方法。

1. push()

2. pop()

3. shift()

4. unshift()

5. splice()

6. sort()

7. reverse()

this.arrs.push(this.arrs.length);

8、替換數(shù)組(改變引用)

如官方所言：filter(), concat() 和 slice()都是會(huì)返回一個(gè)新數(shù)組

this.arrs = this.arrs.contact(this.arrs.length);
// or
// this.arrs = this.arrs.contact([this.arrs.length]);

官方對(duì)性能問(wèn)題的回應(yīng)：

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

對(duì)象

索引

增刪元素；

正文

data: {
 foo: { name: 'isaac' }
}

增刪元素

this.foo.job = 'coder';
delete this.foo.name;

如上增刪元素是無(wú)效的。

官方的解決方法：

// 新增
Vue.set(this.foo, 'job', 'coder');

// 刪除
Vue.delete(this.foo, 'name');

Vue.delete對(duì)數(shù)組也是有效傳送門

以上是“Vue不能檢測(cè)到Object/Array更新的情況怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：Vue不能檢測(cè)到Object/Array更新的情況怎么辦
本文網(wǎng)址：http://www.rwnh.cn/article44/ipcshe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、App設(shè)計(jì)、電子商務(wù)、靜態(tài)網(wǎng)站、定制網(wǎng)站、外貿(mào)建站

廣告

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