大家都知道，在vue.js中给我们提供了watch的方法来做对象变化的监听，而且在callback中会返回两个对象，分别是oldValue和newValue.
因为Object是引用类型，所以，如果你在vue中watch一个对象或者数组，那么你收到的新老值是一样的，
我们看下面的例子，组件有一个变量instanceInfo，是一个Object。
export default {
props: {
instanceInfo: Object
},
watch: {
instanceInfo:{
handler(val,oldVal){
console.log('new:' + val.name, 'old:' + oldVal.name);
},
deep:1
}
}
};
我们多次修改instanceInfo的name属性，只有第一次新老值不一致，后面多次修改新老对象竟然一致了。
这是因为watch并没有做缓存，遇到基础类型，还好说，遇到引用类型，就无法正确的获取oldVal了。
这时候我们要解决这个问题，就需要用到一个属性，就是computed是有缓存的这个特性。我们就需要借助computed来解决这个问题，
export default {
props: {
instanceInfo: Object
},
computed: {
tempObj() {
return Object.assign({}, this.instanceInfo);
}
},
watch: {
tempObj: {
handler(val, oldVal) {
if (oldVal) {
console.log('new:' + val.name, 'old:' + oldVal.name);
}
},
deep: true,
immediate: true
}
}
};
我们把instanceInfo通过在computed里面生成一个模拟变量，返回一个Object.assign新对象，注意一定是新对象，他有独立的引用。
然后我们watch这个在computed里面的tempObj，就可以监听新老值了。
image.png
当然，如果instanceInfo里面的某个属性，是引用类型，这种方法还需要，监听这个属性才能获取新老值。
