watch侦听器的用法

侦听器的格式

watch侦听器用于监视数据的变化，从而针对数据的变化做特定的操作

1.方法格式的侦听器
缺点：
1.无法在刚进页面的时候自动触发
2.如果侦听的是一个对象，如果对象中属性发生了变化，不会触发侦听器

 watch:{
            username(newVal,oldVal){
                if(newVal == ''){
                    return
                }
                console.log('监听到 username 值的变化',newVal,oldVal)
            }
        }

2.对象格式的侦听器
好处1：可以通过Immediate选项让侦听器自动触发
好处2：可以通过deep选项侦听对象中每个属性的变化

 watch:{
            username:{
                handler(newVal,oldVal){
                    console.log(newVal,oldVal)
                },
                immediate:true  //进入自动触发：default flase
            }
        }

深度监听 deep

  watch:{
            info:{
                handler(newVal){
                    console.log(newVal.username)
                },
                deep:true //开启深度监听 任何一个属性发生变化都会触发
            }
        }

侦听子属性

watch:{
            //如果要侦听的是对象的子属性的变化,外面必须包裹一层单引号
            'info.username'(newVal){
                console.log(newVal)
            }
        }