VUE监听

写法一

• 直接写一个监听处理函数或者所监听的数据后面直接加字符串形式的方法名

  <input type="text" v-model="cityName"/>
  new Vue({
    el: '#root',
      data: {
       cityName: 'shanghai'
   },
     watch: {
       cityName(newName, oldName) {} 或者  cityName: 'nameChange' //nameChange方法名
    } 
   })
  

写法二

• 监听首次绑定

  new Vue({
     el: '#root',
     data: {
       cityName: ''
  },
      watch: {
        cityName: {
  　　    handler(newName, oldName) {},
  　　    immediate: true
        }
      } 
  })
  
  

写法三

• 深度监听deep

• 监听到对象内部属性的改变

• 数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听

  <input type="text" v-model="cityName.name"/>
  new Vue({
    el: '#root',
    data: {
      cityName: {id: 1, name: 'shanghai'}
    },
    watch: {
      cityName: {
      handler(newName, oldName) {},
      deep: true,
      immediate: true
    }
  } 
  })
  
  

• 指定对某一属性值监听

  watch: {
      'cityName.name': {
        handler(newName, oldName) {},
        deep: true,
        immediate: true
    }
  }