快捷導(dǎo)航

vue中實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)組內(nèi)部元素

更新時(shí)間：2022年08月24日 08:51:18 作者：小道士在路上

這篇文章主要介紹了vue中實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)組內(nèi)部元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue監(jiān)聽(tīng)數(shù)組內(nèi)部元素

在VUE中，對(duì)數(shù)組的監(jiān)聽(tīng)是淺監(jiān)聽(tīng)，也就是它只能監(jiān)聽(tīng)到數(shù)組的長(zhǎng)度或者有無(wú)的變化，當(dāng)我們修改數(shù)組中的某一個(gè)值時(shí)，也就是數(shù)組的長(zhǎng)度狀態(tài)并沒(méi)有改變時(shí)，在正常情況下它是無(wú)法監(jiān)聽(tīng)到的，在watch中我們知道可以使用deep屬性進(jìn)行深監(jiān)聽(tīng)，那么在其他情況下呢？

我們有兩種辦法解決此問(wèn)題

1.通過(guò)原生的js對(duì)數(shù)組先進(jìn)行切割，然后在添加新的內(nèi)容（也就是我們要修改的內(nèi)容）

array.splice(i, 1, newdata); ? ?//從i位置開(kāi)始 ?刪除1個(gè)元素并用newdata來(lái)替代它

2.使用vue提供的函數(shù)$set

$set(array,i,newdata); ? //把a(bǔ)rray數(shù)組的第i的值替換為newdata

vue如何監(jiān)聽(tīng)數(shù)組的變化

修改了數(shù)組對(duì)象的原型，在原本的原型鏈上插入了一個(gè)新的原型對(duì)象，在新的原型對(duì)象上重寫了7個(gè)變異方法（push/pop/unshift/shift/splice/sort/reverse）

var arrayProto = Array.prototype
var newArrayProto = Object.create(arrayProto)
newArrayProto.push = function (...rest) {
    // 監(jiān)聽(tīng)到調(diào)用了數(shù)組的push方法，執(zhí)行視圖渲染的代碼
    console.log('監(jiān)聽(tīng)到調(diào)用了數(shù)組的push方法，執(zhí)行視圖渲染的代碼，添加之前的邏輯。。。。')

    // 為了保留原來(lái)的數(shù)組push方法的邏輯
    arrayProto.push.call(this, ...rest)

    console.log('數(shù)組push方法添加之后的邏輯，。。。。。')
}
// 在遞歸遍歷數(shù)據(jù)的時(shí)候，只要找到數(shù)組數(shù)據(jù)，就將其原型指向?yàn)閚ewArrayProto
// arr.__proto__ = newArrayProto
var arr = [1,2,3]
arr.__proto__ = newArrayProto

在這里插入圖片描述