vue、watch功能对Array和Object的监听oldVal,val新老值一样的解决方案

Posted 2023-03-27

参考技术A 大家都知道，在vue.js中给我们提供了watch的方法来做对象变化的监听，而且在callback中会返回两个对象，分别是oldValue和newValue.
因为Object是引用类型，所以，如果你在vue中watch一个对象或者数组，那么你收到的新老值是一样的，
我们看下面的例子，组件有一个变量instanceInfo，是一个Object。

我们多次修改instanceInfo的name属性，只有第一次新老值不一致，后面多次修改新老对象竟然一致了。

这是因为watch并没有做缓存，遇到基础类型，还好说，遇到引用类型，就无法正确的获取oldVal了。

这时候我们要解决这个问题，就需要用到一个属性，就是computed是有缓存的这个特性。我们就需要借助computed来解决这个问题，

我们把instanceInfo通过在computed里面生成一个模拟变量，返回一个Object.assign新对象，注意一定是新对象，他有独立的引用。
然后我们watch这个在computed里面的tempObj，就可以监听新老值了。

当然，如果instanceInfo里面的某个属性，是引用类型，这种方法还需要，监听这个属性才能获取新老值。

vue-watch

参考技术A title: vue-watch数组和对象
date: 2017-03-21

本文通过示例介绍vue如何监听数组和对象的变化。

数组更新检测

这部分仅支持通过下列方法操作数组

针对array[index]=newVal可采用Vue.set(array, index, newValue)或者array.splice(index, 1, newValue)代替；

针对array.length=newVal可采用array.splice(newLength)代替；

watch选项

实例watch

响应式原理/变化检测

watch选项”watch vue实例data中的“对象属性”变化：

vue实例watch data中的“对象属性”变化：

如果希望在过程中添加响应式对象属性，则可通过Vue.set(obj,'propetyName',val)或者vm.$set(obj,'propetyName',val);

如果希望在过程中批量添加响应式对象属性，可采用this.someObject = Object.assign(, this.someObject, a: 1, b: 2 )；此时，handler函数接收的oldVal是原obj，newVal是变化后的obj；

监听数组中对象的变化：

说明：配置了deep为true后，vue会监听对象属性的变化，如果对象属性是引用类型的，则会深入监听，深入监听的规则与以上监听数组、对象规则一致，如：

arr[0].a.b.c.push(3);会被监听到

vm.$set(vm.arr[0].a.b,'propetyName',val);会被监听到

等等……