wacth监听事件的使用

1.监听器(watch)

1.watch监听器主要是用来监听变量的变化，然后通过对变量的监听，在钩子函数中写入相应的操作。

2.watch监听器会监听data中数据的变化，只要一变化，就能够执行相应的逻辑
3.监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值

2.普通监听

注意事项：当值第一次绑定的时候，不会执行监听函数

  
//监听 age值发生变化时触发
watch: {
    age(newAge, oldAge) {
        console.log('变化前的值' + oldAge, '变化后的值' + newAge)
    }
}

3.handler方法和immediate属性

注意事项：

1.第一次绑定监听的时候，不会执行监听函数

2.如果想在第一次绑定的时候执行此监听函数 则需要 设置 immediate为true

  
watch: {
    userName: {
        handler (newName, oldName) {
            console.log('变化前的值' + oldAge, '变化后的值' + newAge)
        },
        immediate: true
    }
}

4.深度监听

        注意事项：如果我们监听的是一个对象，会发现无法是无法触发watch监听的，这时候就需要用到deep属性进行深度监听，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能消耗就会非常大了，修改对象里面任何一个属性都会触发这个监听器里的handler函数。        

data (){
    return {
        userName: {name:'张三', age: 18 }
    }
},
watch: {
    userName: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true, // 第一次绑定也会触发监听
        deep: true // 开启深度监听
    }
}

如果只想监听对象中的某一项属性变化，那么可以不用开启深度监听，可以用 '对象.属性' 这种写法监听 如以下代码

data (){
    return {
        userName: {name:'张三', age: 18 }
    }
},
watch: {
    'userName.name': {
        handler(newName, oldName) {
            console.log(newName)
        }
    }
}