关于vue.js: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(){
        return JSON.parse(JSON.stringify(this.pullStreamList));
    }
},
watch:{
    pullStreamListWatch: {
        handler: function (value, oldValue) {
            console.log("newval", newval);
            console.log("oldval", oldval);
        },
    }
}

测试后果