vue中实现监听数组内部元素

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

vue监听数组内部元素

在VUE中，对数组的监听是浅监听，也就是它只能监听到数组的长度或者有无的变化，当我们修改数组中的某一个值时，也就是数组的长度状态并没有改变时，在正常情况下它是无法监听到的，在watch中我们知道可以使用deep属性进行深监听，那么在其他情况下呢？

我们有两种办法解决此问题

1.通过原生的js对数组先进行切割，然后在添加新的内容（也就是我们要修改的内容）

array.splice(i, 1, newdata);    //从i位置开始  删除1个元素并用newdata来替代它

2.使用vue提供的函数$set

$set(array,i,newdata);   //把array数组的第i的值替换为newdata

vue如何监听数组的变化

修改了数组对象的原型，在原本的原型链上插入了一个新的原型对象，在新的原型对象上重写了7个变异方法（push/pop/unshift/shift/splice/sort/reverse）

var arrayProto = Array.prototype
var newArrayProto = Object.create(arrayProto)
newArrayProto.push = function (...rest) {
    // 监听到调用了数组的push方法，执行视图渲染的代码
    console.log('监听到调用了数组的push方法，执行视图渲染的代码，添加之前的逻辑。。。。')

    // 为了保留原来的数组push方法的逻辑
    arrayProto.push.call(this, ...rest)

    console.log('数组push方法添加之后的逻辑，。。。。。')
}
// 在递归遍历数据的时候，只要找到数组数据，就将其原型指向为newArrayProto
// arr.__proto__ = newArrayProto
var arr = [1,2,3]
arr.__proto__ = newArrayProto

在这里插入图片描述