Vue 中 watch 的使用

1、普通数据监听

注意：数据需要声明之后使用

<input type="text" v-model="userName"/>  
  //监听   当userName值发生变化时触发
  watch: {
      userName (newName, oldName) {
          console.log(newName)
      }
  }
  //可以监听数据变化时执行函数
  watch: {
      'userName':'nameChange '
  }
  
  watch: {
      userName: {
          handler (newName, oldName) {
              console.log(newName)
          },
          immediate: true //第一次绑定的时候执行此监听函数 则需要设置 immediate为true
      }
  }
   methods: {
    nameChange () {
      console.log()
    }
  }

2、对象监听

深层次的监听需要设置deep为true，如果对象属性较多可以只监听一个属性：cityName.name’:

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