vue watch监听对象及对应值的变化

var vm=new Vue({
    data:{
        x:1,
        info:{
            name:"gmx",
            age:18,
            sex:1
        }
    },
    watch:{
        x(val, oldVal){//普通的watch监听
            console.log("x: "+val, oldVal);
        },
        info:{//深度监听，可监听到对象、数组的变化
            handler(val, oldVal){
                console.log("info.name: "+val.name, oldVal.name);//但是这两个值打印出来却都是一样的
            },
            deep:true
        }
    }
})
vm.x=2
vm.info.name='gmx'

a是一个普通的值，当a的值变化时会被监听到，b是一个对象，不能直接像a那么写，需要深度监听才能捕捉到，里面的deep设为了true，这样的话，如果修改了这个info中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如name，这个时候可以这样:

watch: {
     'info.name': {
         handler: function() {
            //do something
         },
     }
}

或者还可以这样巧用计算属性,然后用watch去监听computed计算过的值就可以直接知道是哪个对应的值发生了变化

computed: {
    //getName只是随便取个名字作为这次计算的名字
    getName() {
    	return this.info.name  //这次计算的属性是哪个属性
    }
}
watch: {
     //观察getName这次计算有啥变化
     getName(val, oldVal) {
        
            //do something
        
     }
}