watch监听器的常见用法（vue2）

一，简单数据类型的用法：

监听data中一个简单数据的变化：如：(常用在input输入框的change，输入删除值变化的情况。比如：当输入框文本变化时，发送请求用户名是否占用的情况)

data(){
    return {
        msg:'123'
    }
},
watch:{
    msg(newVal,oldVal){
        console.log(newVal);
        console.log(oldVal);
    }
},

二，复杂数据类型的数据监听：（通常用在对象上）

1.实现打开页面默认自动触发监听器（immediate）和对象深度监听（deep）:

data(){
    return {
        user:{
            name:'123',
            old:29
    }
},
watch(){
    user:{
        handler(newVal,oldVal){
            console.log(newVal);
            console.log(oldVal);
        },
        immediate:true，    //immediate为false为打开页面不自动触发一次监听；true为打开页面自动触发一次监听
        deep:true      //启用深度监听（用于监听对象中某一属性值发生变化，只有有属性变化就触发）
    }
}

2.监听对象中某一个指定属性的变化：

data(){
    return {
        user:{
            name:'123',
            old:29
    }
},
watch(){
    'user.name'(newVal,oldVal){    //必须用引号包裹起来。（只是监听user中的那么属性）
         console.log(newVal);
         console.log(oldVal);
    }
}