vue2中watch监听的使用及immediate、handler和deep属性解读

一、watch监听的三个属性

        1.handler：watch中监听到数据变化后需要具体执行的方法；

        2.immediate：使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性；

        3.deep：当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听，数组字符串一般不需要。

data（） {
    return {
        obj: {
            'name': "王",
            'age': 18
        },
    }
},
watch: {
    obj: {
        // 执行方法
        handler(newValue,oldVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度监听
        immediate: true  // 第一次改变就执行
    }，
   // 如果只需要监听对象中的一个属性值，则可以做以下优化：使用字符串的形式监听对象属性：
    'obj.name': {
        // 执行方法
        handler(newValue,oldVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true, // 深度监听
        immediate: true  // 第一次改变就执行
    }
}

 二、常用的几种写法

1.通过watch监听msg数据的变化

watch: {
    msg(newValue, oldValue) {
        console.log(oldValue)
        console.log(newValue)
    }
}

2.通过watch监听obj 数据的变化。（深度监听 deep）

data（） {
    return {
        obj: {
            'name': "王",
            'age': 18
        },
    }
},
watch: {
    obj: {
        handler(newValue,oldVal) {
             console.log(oldValue)
             console.log(newValue)
        },
        deep: true  // 深度监听
    }
}

3.通过watch监听data数据的变化，数据发生变化时,执行 change 方法

watch: {
    data： 'change' // 值可以为methods的方法名
}，
methods: {
    change(newValue,oldVal){
　　　console.log(oldVal,newVal)
　 }
}