VUE中watch侦听器的应用

1.监听单个属性值

<template>
  <h2>App根组件</h2>
  <hr>
  <input type="text" v-model="username">
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      username:''
    }
  },
  watch:{
    username:{
      handler(newval,oldval){
        console.log(oldval,newval);
      }
    }
  }
}
</script>

2.监听对象的变化

<template>
  <h2>App根组件</h2>
  <hr>
  <input type="text" v-model="userinfo.name">
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      username:'',
      userinfo:{
        name:''
      }
    }
  },
  watch:{
    userinfo:{
      handler(newval){
        console.log(newval);
      },
      // 立即触发watch事件
      immediate:true,
      // deep选项，对象里面的值发生改变就可以监听到
      deep:true
    }
  }
}
</script>

<style>

</style>

3.监听对象中的单个属性

export default {
  name: 'App',
  data() {
    return {
      username:'',
      userinfo:{
        name:''
      }
    }
  },
  watch:{
    // userinfo:{
    //   handler(newval){
    //     console.log(newval);
    //   },
    //   // 立即触发watch事件
    //   immediate:true,
    //   // deep选项，对象里面的值发生改变就可以监听到
    //   deep:true
    // }
    "userinfo.name":{
      handler(newval){
        console.log(newval);
      }
    }
  }
}
</script>