vue中watch的3种写法

 ** 1. 普通数据类型：**
         <input type="text" v-model="userName"/>  
        //监听   当userName值发生变化时触发
        watch: {
            userName (newName, oldName) {
                console.log(newName)
            }
        }
        
        watch: {
            userName: {
                handler (newName, oldName) {
                    console.log(newName)
                },
                immediate: true
            }
        }
缺点：
只有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置 ** immediate为true**




 ** 2.  对象类型：**
 当需要监听对象的改变时，此时就需要设置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
            }
        }
        注意点：如果对象的属性较多，可以之监听某一个属性    'cityName.name':
        
        
 ** 3.  数组类型：**
    数组的变化不需要深度监听

**注意点：**
    在watch中不要使用箭头函数，因为箭头函数中的this是指向当前作用域