1. 重新定义数组原型
2. 创建新对象，原型指向oldArrPrototype

const oldArrPrototype=Array.prototype;
const ArrProto=Object.create(oldArrPrototype);
['push','pop','shift','unshift'].forEach(methodName=>{
      ArrProto[methodName]=function(){
        updateView();//更新视图
        oldArrPrototype[methodName].call(this,...arguments)
      }
    })

3. 当observer的target为数组时，就将它的原型更改为上面创建的ArrProto，它里面重写了方法，当调用数组的push方法时，就会去调ArrProto中的push方法。

    if(Array.isArray(target)){
      target.__proto__=ArrProto
    }

为什么不直接修改数组的原型呢？
这样会污染全局的Array原型。

Vue中监听数组解析

1，简单监听一个参数，demo如下

data() {
        return {
            msg: "test---test",
        }
    },
    watch: {
        msg(newVal, oldVal) {
            console.log(newVal)
            console.log(oldVal)
        },
    },
    created() {
        this.msg = "change"
    }

2，对数组的监听，上代码

    data() {
        return {
            list: [1, 2, 3, 4, 6],  //需要被监听的数组
        }
    },
    watch: {
        list(newVal, oldVal) {  //对数组进行监听
            console.log(newVal)
            console.log(oldVal)
        },
    },
    created() {
        this.list[2] = "666"   //将数组对应下标值改变
    }

以上方法watch并不会有任何监听结果，此时监听失败。那么这个问题的由来，可以参考这篇文章监听数组变化
解决办法，
方法一
使用vuejs提供的变异方法，例如splice（） push() 等

    created() {
        this.list.splice(1,1,666)  //用splice方法，将数组index=1的数值改成换成666
        // this.list.push("") // 增加空值  也能监听到
        // this.list.pop()
        // this.list.shift()
        //this.length = 10  //直接改变数组长度  无效
    }

以上方法就可以监听数组中某个值或属性改变，类似还有push，pop，等方法，这里不进行列举。补充一下，如果直接这样写 this.list.length = 7 或 增加深度监听（handler方法和immediate属性）这样都是无法监听到的。直接增加数组长度，而由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

//当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
//当你修改数组的长度时，例如：vm.items.length = newLength

方法二 Vue.set （简洁明了 推荐使用）
Vue.set(vm.items, indexOfItem, newValue) (要改变的数组, 下标 , 新值)
或者使用 this.$set(this.list,1,888) 以上例子输出结果，也可以检测到数组变化

[1, 888, 3, 4, 6, ob: Observer]
[1, 888, 3, 4, 6, ob: Observer]

以上有个问题,那就是你会发现打印的新值和旧值是一样的。虽然它监听到改变，但是无法判断具体是哪个值发生了改变，官方给出了说明

解决办法

可采用computed计算属性进行对源对象的深拷贝，完成新值更新。

export default {
    name: 'App',
    data() {
        return {
            list: [1, 2, 3, 4, 6],
        }
    },
    computed: {
        newList(){    
            return JSON.parse(JSON.stringify(this.list))
        }
    },
    watch: {
        newList(newVal, oldVal) {
            console.log(newVal)
            console.log(oldVal)
        },
    },
    created() {
        this.$set(this.list,1,888)
    }
}

到这里，就可以实现对数组多方位监听以及数值的变化了，希望可以帮到你。

1.vue单独监听一个数组或者一个对象变化

watch:{
 'payList' : {
   handler : function(newVal,oldVal){
    console.log(newVal,'变化后的值',oldVal,‘变化前的值’)
   }
 }
}

2.如果你想监听一个数组中多个对象是否变化，请看这里！

watch:{
  deep:true,//深度监听
  'payList' : {
    immediate：true,
    handler : function(newVal,oldVal){
      console.log(newVal,'变化后的值',oldVal,‘变化前的值’)
    }
  }
}

没错！，添加一个deep:true就可以实现对一个数组中多个对象是否变化进行监听啦😊
3.watch中除了deep外，还有一个属性immediate：

immediate表示在watch中首次绑定的时候，是否执行handle。
值为true则表示在watch中声明的时候，就立即执行handler方法，
值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。