vue 中的侦听属性watch

侦听的作用：监听数据的变化的

使用

    
{{ num }}

（1）简单的数据类型：

    const vm = new Vue({
        el:'#app',
        data:{
            num:100
        },
        watch:{
            num (newVal ,oldVal){  //获取新的值，得到修改前的值
                console.log('新的值' , newVal ,'旧的值'  ,oldVal)
            }
        }
    })

（2）复杂类型

const vm = new Vue({
    el:'#app',
    data:{
        obj:{  //对象的形式 
            name:'szf',
        }
    },
    watch:{
        obj:{
            handler(newVal){
                console.log(newVal.name);  //因为复杂类型直接写  监听的是对象的地址  所以不会打印
            }
        }
    }
})

监听 obj ,如果监听成功 newVal 就是obj的最新值 newVal 也是对象

因为obj是复杂类型 引用类型,直接这么写,监听的是对象的地址

所以需要配置参数

（1）deep：true：深度监听

（2）immediate: true, //立即监听 这样在页面刷新的时候就开始监听了，而不是等到第一次触发

（3）handler（newVal） ：深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用

const vm = new Vue({
    el:'#app',
    data:{
        obj:{  //对象的形式 
            name:'szf',
        }
    },
    watch:{
        obj:{
            deep:true,
            immediate:true,
            handler(newVal){
                console.log(newVal.name);  //因为复杂类型直接写  监听的是对象的地址  所以不会打印
            }
        }
    }
})

还有一种方式 简单粗暴点，但是不能够页面加载就监听（相当于上面的代码少了immediate参数）

 'obj.name'(newVal){
       console.log(newVal);
    }