vue中watch监听用法

  watch:{
  
    //1.监听data数据变化，并输出新旧值
    data(newValue,oldValue){//监听data数据变化
        console.log(newValue,oldValue)
    },
    
    //2.监听data值变化，若变化执行change方法
    data: 'change', // 值可以为methods的方法名
    
    //3.在最初绑定值时深度监听一个对象
    data: {//监听一个对象
        handler(newVal) {
            console.log(newVal)
        },
        deep: true,//普通的watch方法无法监听到对象内部属性的改变，deep属性可以对对象进行深度监听
        immediate:true//如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性
    },
    
    //4.监听对象中的某一个值
    //设置deep:true则可以监听到   data.id  的变化，此时会给 data  的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行  handler,如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性
    'data.id': {
        handler(newVal, oldVal) {
             console.log(newVal)
        },
     deep: true
    } 
  },
  
  methods: {
    change(curVal,oldVal){
　　　console.log(curVal,oldVal)
　 }
}