03vue侦听器-watch

一.什么是侦听器

        watch侦听器允许开发者监视数据的变化.针对数据的变化进行一些操作.

二.侦听器的两种格式

1.方法格式的侦听器

        缺点1:无法在刚进入页面的时候 , 自动触发!!!

        缺点2:如果侦听的是一个对象,对象中的属性发生了变化,是侦听不到的!!!

watch:{
    //要监视哪个数据的变化,就把哪个数据作为方法名即可
    username(newVal,oldVal){
        console.log(newval，oldval)  
    }
}

2.对象格式的侦听器

        好处1:可以通过 immediate选项,让侦听器自动触发!!!

        好处2:可以通过deep选项,让侦听器实现深度监听!!!

watch: {
    //定义对象格式的侦听器
    username: {
        immediate:true//默认为false,初始化自动调用一次
        deep:true     //实现深度监听
        //侦听器的处理函数
        handler( newVal，oldVal) {
          console.log(newval，oldval)
        },
        
    }
}

三，侦听器的应用场景

 

 

 

四，deep（深度监听）

        对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true.

五.监听对象单个属性的变化写法

watch: {
'info.username' : {
    handler(newVal) {
      console.log(newVal)
    }
}
}