快捷導(dǎo)航

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

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

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

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

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

我們有兩種辦法解決此問題

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

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

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

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

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

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

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

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

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

在這里插入圖片描述