vue watch监听数组新旧值相同问题

场景

vue使用watch监听数组变化时，更改数组但其newVal和oldVal总是相同，无法区分数组中哪条数据是新添加的。

产生原因

Vue官方得知：watch用法中提到，在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

常用变更函数

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

解决思路

将数组用一个基本数据类型的中间变量做过渡，先将数组转为为普通数据类型的变量，watch就可以监听到中间变量的变化，最后再将普通数据变量转化为数组。很容易就想到数组与string之间的相互转换，这个转化过程就交给vue的computed计算处理。

实例代码

data: () {
    return{
        pullStreamList:[]
    }
},
computed:{
    pullStreamListWatch: function () {
        // 其实程序做到这一步就可以监听到pullStreamList数据的变化了，再用JSON.parse做数据还原方便后边数据处理。
        //return JSON.stringify(this.pullStreamList); 
        return JSON.parse(JSON.stringify(this.pullStreamList));
    }
},
watch:{
    pullStreamListWatch: {
        handler: function (value, oldValue) {
            console.log("newval", newval);
            console.log("oldval", oldval);
        }
    }
}

测试结果