watch监听事件三种写法（转载）

前言：此文为转载，因为作者写的太清楚了，一目了然，容易理解，所以直接保存，方便日后查看。感谢大佬！！！

原文链接：https://www.jianshu.com/p/a16e74761193

第一种 普通监听

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

第二种 第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，

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

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

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

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

再次感谢作者的贡献！！！