场景
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); }, }}