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

大家都知道，在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里面的某个属性，是引用类型，这种方法还需要，监听这个属性才能获取新老值。