场景

vue应用watch监听数组变动时,更改数组但其newVal和oldVal总是雷同,无奈辨别数组中哪条数据是新增加的。

产生起因

Vue官网得悉:由watch用法中提到,在变更 (不是替换) 对象或数组时,旧值将与新值雷同,因为它们的援用指向同一个对象/数组。Vue 不会保留变更之前值的正本。

罕用变更函数

数组:push、pop、shift、unshift、splice、reverse、sort

解决思路

将数组用一个根本数据类型的两头变量做过渡,先将数组转为为一般数据类型的变量,watch就能够监听到两头变量的变动,最初再将一般数据变量转化为数组。很容易就想到数组与string之间的互相转换,这个转化过程就交给vue的computed计算解决。

实例代码
data: () {    return{        pullStreamList:[]    }},computed:{    pullStreamListWatch(){        return JSON.parse(JSON.stringify(this.pullStreamList));    }},watch:{    pullStreamListWatch: {        handler: function (value, oldValue) {            console.log("newval", newval);            console.log("oldval", oldval);        },    }}
测试后果