watch监听事件三种写法

1. 普通监听

缺点：当值第一次绑定的时候，不会执行监听函数

<input type="text" v-model="age"/>  
//监听 age值发生变化时触发
watch: {
    age(newAge, oldAge) {
        console.log(newAge)
    }
}

2. 第二种写法

只有当值改变的时候 才会执行，如果想在第一次绑定的时候执行此监听函数 则需要 设置
immediate为true

<input type="text" v-model="age"/>  
watch: {
    age: {
        handler (newAge, oldAge) {
            console.log(newAge)
        },
        immediate: true
    }
}

3. 深度监听

当要监听对象或数组的时候需要添加deep:true 属性

<input type="text" v-model="userName.name" />
data (){
    return {
       userName: {name:'张三'}
    }
},
watch: {
    userName: {
        handler(newName, oldName) {
            console.log(newName)
        },
        immediate: true,
        deep: true
    }
}