如何解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染的問(wèn)題

這篇文章主要介紹了如何解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染的問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

做checkbox多選功能的時(shí)候遇到了一個(gè)坑，邏輯怎么看都對(duì)，但是就是有bug，最后發(fā)現(xiàn)數(shù)組那里值變了頁(yè)面勾選沒(méi)有重新渲染。

換了關(guān)鍵詞搜索找到了相關(guān)方法。

其實(shí)之前讀文檔教程的時(shí)候看到過(guò)這里，但是只有真的使用之后才會(huì)有最直接的感觸。

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

變異方法

Vue 包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你打開(kāi)控制臺(tái)，然后用前面例子的 items 數(shù)組調(diào)用變異方法：example1.items.push({ message: 'Baz' }) 。

替換數(shù)組

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

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

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

注意事項(xiàng)

由于 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

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

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

為了解決第二類問(wèn)題，你可以使用 splice：

example1.items.splice(newLength)

對(duì)象更改檢測(cè)注意事項(xiàng)

還是由于 JavaScript 的限制，Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：

var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 現(xiàn)在是響應(yīng)式的
 
vm.b = 2
// `vm.b` 不是響應(yīng)式的

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。例如，對(duì)于：

var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})

你可以添加一個(gè)新的 age 屬性到嵌套的 userProfile 對(duì)象：

Vue.set(vm.userProfile, 'age', 27)

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

this.$set(this.userProfile, 'age', 27)

有時(shí)你可能需要為已有對(duì)象賦予多個(gè)新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應(yīng)該用兩個(gè)對(duì)象的屬性創(chuàng)建一個(gè)新的對(duì)象。所以，如果你想添加新的響應(yīng)式屬性，不要像這樣：

Object.assign(this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

你應(yīng)該這樣做：

this.userProfile = Object.assign({}, this.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染的問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)題目：如何解決vue數(shù)組中對(duì)象屬性變化頁(yè)面不渲染的問(wèn)題
URL鏈接：http://muchs.cn/article48/gpjjep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站策劃、微信小程序、電子商務(wù)、搜索引擎優(yōu)化、網(wǎng)站營(yíng)銷

廣告

聲明：本網(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)