场景vue使用watch监控数组变化时，数组变化了但是它的newVal和oldVal一直是一样的，而且是无法区分数组中的哪条数据是新添加的。Vue官方了解到的原因：watchusage中提到，当改变（不是替换）一个对象或数组时，旧值会和新值一样，因为它们的引用指向同一个对象/数组。Vue不会保留更改前值的副本。常用的变换函数数组：push、pop、shift、unshift、splice、reverse、sort解决思路用一个基本数据类型的中间变量进行数组的变换，先把数组转换成一个普通数据类型的变量，而watch可以监听到中间变量的变化，最后将普通数据变量转化为数组。很容易想到数组和字符串之间的相互转换，这个转换过程交给Vue的computed计算。示例代码data:(){return{pullStreamList:[]}},computed:{pullStreamListWatch:function(){//其实经过这一步程序就可以监听pullStreamList数据的变化，然后使用JSON.parse来使数据恢复方便后续的数据处理。//返回JSON.stringify(this.pullStreamList);返回JSON.parse(JSON.stringify(this.pullStreamList));}},watch:{pullStreamListWatch:{handler:function(value,oldValue){console.log("newval",newval);console.log("oldval",oldval);}}}测试结果
