最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章給大家分享的是有關(guān)如何解決vue數(shù)組和對(duì)象渲染的問(wèn)題的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站與策劃設(shè)計(jì),興寧網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:興寧等地區(qū)。興寧做網(wǎng)站價(jià)格咨詢:18980820575

數(shù)組更新檢測(cè)

1. 在 vue 中使用數(shù)組的push()、pop()、shift()、unshift()、splice()、sort()、reverse() 、filter()、concat() 方法時(shí)，改變數(shù)組的同時(shí)可以觸發(fā)視圖的變化。

2. 注意： 有兩種情況 vue 無(wú)法檢測(cè)到變動(dòng)的數(shù)組，分別是：

（1）直接操作數(shù)組的長(zhǎng)度；

// Vue.set
this.$set(arr, indexOfItem, newValue)
// Array.prototype.splice
this.arr.splice(indexOfItem, 1, newValue)

(2)利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：this.arr[indexOfItem] = newValue

this.arr.splice(newLength)

demo如下：

問(wèn)題： 用v-for循環(huán)渲染數(shù)組數(shù)據(jù)時(shí)，數(shù)據(jù)更新了，視圖卻沒(méi)有更新

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

1. 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue
2. 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength

解決方法：

為了避免第一種情況，以下兩種方式將達(dá)到像 vm.items[indexOfItem] = newValue 的效果， 同時(shí)也將觸發(fā)狀態(tài)更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue) （數(shù)組， 所引， 值） 
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) （所引， 長(zhǎng)度， 值）

避免第二種情況，使用 splice：

example1.items.splice(newLength)

對(duì)象更新檢測(cè)

方法一：this.$set()

方法二：Object.assign()

demo.vue

補(bǔ)充：

this.$forceUpdate()迫使 Vue 實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。
使用 v-if 在切換時(shí)，元素及它的綁定數(shù)據(jù)和組件都會(huì)被銷毀并重建

感謝各位的閱讀！關(guān)于“如何解決vue數(shù)組和對(duì)象渲染的問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章題目：如何解決vue數(shù)組和對(duì)象渲染的問(wèn)題
轉(zhuǎn)載注明：http://fisionsoft.com.cn/article/ipeccs.html