Vue2 watch监听

watch：是vue中常用的侦听器（监听器），用来监听数据的变化

<template>
  <div>
    <input type="text" v-model="obj.listenIn">
  </div>
</template>

<script>
export default {
  data () {
    return {
      listenIn:'',
      obj:{
        listenIn:'1'
      }
    }
  },
  watch: {
    // 普通用法1（监听某一字段的值）
    listenIn(newVal,oldVal){
       console.log(newVal);    //新值
       console.log(oldVal);    //旧值
    }
    
    // 普通用法2（监听对象的某一项的值）
    'obj.listenIn':{
       handler(newVal,oldVal){
         console.log(newVal);    //新值
         console.log(oldVal);    //旧值
       }
     }
    
    //复杂用法1（immediate）
    // 作用：immediate页面进来就会立即执行，值需要设为true
    'obj.listenIn':{
       handler(newVal,oldVal){
         console.log(newVal);    //新值
         console.log(oldVal);    //旧值
       },
       immediate:true
     }

    //复杂用法2（deep）
    // 作用：deep 用来监听data中的对象，值需要设为true
    'obj':{
       handler(newVal,oldVal){
         console.log(newVal);    //新值
         console.log(oldVal);    //旧值
       },
       deep:true
     }
  }
}
</script>

注：本人前端小白 ，如有不对的地方还请多多指教