watch的3种写法

1、普通数据类型

<input  type="text" v-model="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是指向当前作用域